LayUI是一款免費，開源，輕量級的前端cms框架，適用于企業(yè)后端,能快速上手開發(fā)，集成了常用的組件，還有完善的文檔和社區(qū)。

最近一直在學習使用layer的layui框架技術，這個主要表現(xiàn)在于彈出層的使用，但是layer頁面效果使用也是非常好用的。

之前寫一個一個關于數(shù)據(jù)的table表格顯示 并帶有分頁功能，實現(xiàn)過程遇到了很多問題，現(xiàn)抽空總結一下。

首先下載最新版的layui文件：

下載完之后引入到自己的項目中，放在根目錄的下面某一個地方：

然后在你要用的jsp頁面上引入相應的js和css：

此時路徑應為你放至layui文件包的路徑，注意路徑不要引入錯誤！

簡單的一個demo頁面：

頁面顯示為：

在此講一下傳入的數(shù)據(jù)格式：

{"code":0,"msg":"","count":29,"data":[{"id":10000,"username":"user-0",...........

我自己定義方式為：

首先創(chuàng)建一個返回類型實體類：?ResultUtil ：

寫相應的get，set方法，然后按照layui定義的返回類型格式寫這個方法的實現(xiàn)類：

其中object就是你要在表格中顯示的數(shù)據(jù)，count為數(shù)據(jù)的條數(shù)，然后寫相應的方法，sql語句 這些都很簡單，在此不多說，寫完之后

在控制層方法中也就是前臺頁面url這個路徑的方法中調(diào)用此方法，注意方法的接口http請求類型，默認：get：

然后在前臺頁面中使用：

紅圈圈中的這個方法在頁面控制臺可以看到你傳入的數(shù)據(jù)。你傳入的data數(shù)據(jù)一定要和你頁面上寫的數(shù)據(jù)一致。

這個是簡單的layui展示table表格的實現(xiàn)過程。

接下來講一講分頁：

此時分頁包括分頁的樣式都已經(jīng)弄好，但是問題就是我們頁面的數(shù)據(jù)還是查出來的那么多條，并沒有根據(jù)layui定義分頁去顯示，這個怎么去解決？

這個問題就是說的重點：實現(xiàn)table表格數(shù)據(jù)的分頁：

因為靜態(tài)json不支持表格自帶分頁，所以我們要在后臺定義好分頁的數(shù)據(jù)傳入前臺頁面。表格設置了page：true

之后，就證明分頁功能啟用了，剩下的就是后臺controller中獲得默認傳過去的limit和page兩個個參數(shù)，根據(jù)參數(shù)計算獲得當前頁顯示的數(shù)據(jù)，然后把數(shù)據(jù)打包為指定的json格式設置返回值就ok了

其實現(xiàn)方法有兩種：

第一種：自定義原生的sql語句分頁：在前臺頁面配置的table中開啟分頁以后訪問url路徑的時候會傳過去兩個參數(shù)，page和limit。page為當前的頁碼，limit為你定義的分頁條數(shù)，這樣可以在后臺方法中

接收這兩個參數(shù)：

接收之后我們要對page進行重新定義，方便于sql語句的分頁：

這樣之后調(diào)用service層方法到mapper文件的sql語句可以直接這樣寫(demo示例)：

select 數(shù)據(jù)，數(shù)據(jù)，數(shù)據(jù)，......? ?from 表名 limit #{pages,jdbcType=INTEGER},#{limit,jdbcType=INTEGER}

這樣之后 頁面就實現(xiàn)分頁了，很簡單的。

接下來說說第二中更為方便的寫法：

就是使用框架的配置：

首先引入相應的jar包：

然后在mybatis-config.xml中配置分頁：

請注意上圖中我用紅色圈圈中的兩個參數(shù)，這個兩個很重要，在dao層寫接收page和limit兩個參數(shù)的時候需要用到：

不管接受到的參數(shù)為什么 注解中一定要用到配置中設定的參數(shù)數(shù)據(jù)，這樣框架才會幫你解析。

配置成功之后 控制層后臺只需接受這兩個參數(shù)，sql語句只需寫個簡單的查詢就可以了，框架會自動幫你實現(xiàn)分頁。

至此分頁講完。

接下來額外補充一下頁面數(shù)據(jù)的轉(zhuǎn)換：

比如說頁面上展示的是個人信息：性別字段數(shù)據(jù)表中存儲的是int類型0或者1? 但是在頁面上需要用男和女展示出來，有兩種實現(xiàn)方式；

第一中很簡單? 直接在后臺service實現(xiàn)方法中給替換成相應的類型，我主要說第二中頁面中替換：

請注意這個字段：

實現(xiàn)：

在table定義中需要轉(zhuǎn)義的字段后面加上templet這個參數(shù)(模板選擇器)：

然后寫templet對應的模板，它可以存放在頁面的任意位置。模板遵循于?laytpl?語法，可讀取到返回的所有數(shù)據(jù)：

注意兩者的對應關系：

模板中第一個個我只寫了一個“男”，這個只是將數(shù)字1轉(zhuǎn)為為男在頁面上顯示，第一個我加了一個span，這個不僅僅是將0替換成“女”，而且還改變了其顏色。

只要認真閱讀了layui開發(fā)文檔這樣都可以實現(xiàn)，接下來我說一個layui文檔中沒有詳細說明百度資料也很少的數(shù)據(jù)轉(zhuǎn)換例子：

將后臺傳過來的時間戳轉(zhuǎn)為為時間顯示：一般如果table表格中設計時間這個列表：后臺傳入前臺都會傳過來一串數(shù)字：

我在layui官網(wǎng)文檔上沒有看見介紹轉(zhuǎn)換時間的，只有在layui的table表頭參數(shù)一覽表中的

中提及了一下使用自定義模板去轉(zhuǎn)換，但是具體怎么轉(zhuǎn)換并沒有詳細說明，百度網(wǎng)上的例子也非常少，經(jīng)過長時間查找，終于有所收獲：

首先在前臺頁面上定義一個轉(zhuǎn)換時間的js方法：

然后在需要轉(zhuǎn)換時間的表頭列上加上參數(shù)：templet去調(diào)用這個時間轉(zhuǎn)換的方法：

這樣轉(zhuǎn)換完之后為：

這種格式。如果不滿足請自己查找資料更換。

這些是在學習layer.layui中遇到的問題總結一下，后續(xù)慢慢添加相關問題解決方案。

總結

以上是生活随笔為你收集整理的layui一个表格中怎么接两个接口的值_layer学习笔记之table表格引入数据实现分页...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。