ssm+layui實現layui的數據表格的內置分頁功能，效果如上圖。
前端JS代碼(進行渲染)：
<script>
table.render({
elem: '#test'
, url: '/blog/getCategory'
, cols: [[{field: 'id', title: 'ID', templet: '#index', width: 40}
, {field: 'leibie', title: '類別'}
, {field: 'time', title: '創建時間'}
, {field: 'annotation', title: '備註'}
, {field: 'delete', title: '操作', toolbar: '#barDemo', align: 'center'}
]]
, parseData: function (res) { //res 即爲原始返回的數據
console.log("成功"+res.status+";=="+res.message+";"+res.total);
return {
"code": res.status, //解析接口狀態
"msg": res.message, //解析提示文本
"count": res.total, //解析數據長度
"data": res.data //解析數據列表
};
}
, page:true
,limit:20
,limits:[5,10,20,30]
});
</script>
思路講解及踩坑：
在你的table數據表格渲染成功，且打開了page後（就是page：true）。接下來要開始對分頁模塊裏面的參數進行設置了，但是在數據表格內打開的分頁與單獨的分頁模塊laypage有些不同。
如上圖，當你一開始渲染成功是，顯示的分頁效果是這樣的，不能跳轉其他頁碼，計算總條數也是顯示爲“共0條”，是靜態的分頁效果。一開始我是懵的，不知道怎麼去設置這裏，讓它變成動態的。
這個時候你需要打開官方文檔，你可以看到有個parseData的函數，它是“數據格式解析的回調函數，用於將返回的任意數據格式解析成 table 組件規定的數據格式”。什麼意思呢？在你前面進行數據表格進行渲染時，js會根據你的url地址發起請求（如下圖所示），並返回後臺傳過來的數據，然後對這個數據進行解析。
發起請求，res就是返回數據。我返回的數據格式如下圖，可以看到，這個函數把res裏面的對應數據賦給了“code”,"msg","count","data"四個變量。code代表了返回狀態，必須爲0，count就是你的數據總條數，我這裏就是總共有多少種分類，data在我這裏就代表了每個條目裏面的數據。當這些值返回以後，分頁自然就變成動態的了。
下面說下，後臺是怎麼實現返回數據的：
事實上，當你的數據表格渲染的時候，自發送的請求自動迴帶上兩個參數page（代表當前是第幾頁）和limit（該頁只能展示多少條數據），如下圖
在controller層接收這兩個參數，如下圖。這裏我在下圖第三個紅框裏面的操作，是爲了根據每一次的請求的page和size來返回相應的數據（比如page= 2，size= 10，就是說你要在第二頁展示10條數據，所以返回數據應該是在數據庫中的第10——19條）
接下來我創建了一個類，用來存儲需要返回的數據，代碼如下
public class ResultMap<T> {
private int status;
private String message;
private int total;
private T data;
public int getStatus() {
return status;
}
public void setStatus(int status) {
this.status = status;
}
public String getMessage() {
return message;
}
public void setMessage(String message) {
this.message = message;
}
public int getTotal() {
return total;
}
public void setTotal(int total) {
this.total = total;
}
public T getData() {
return data;
}
public void setData(T data) {
this.data = data;
}
@Override
public String toString() {
return "ResultMap{" +
"status=" + status +
", message='" + message + '\'' +
", total=" + total +
", data=" + data +
'}';
}
public ResultMap(){
}
public ResultMap(int status,String message,int total,T data){
this.status = status;
this.message = message;
this.total = total;
this.data = data;
}
}
將你查詢到的數據存到上面這個勒種，再返回給前端即可。
寫的有不足之處，還請各位指正。
補充其它層代碼：
service層：
impl:
mapper
mapper.xml
