快速上手:
只需要配置HTML，js 硫嘶，controller以及持久化層的分頁查詢。
html
- 引入相關(guān)js
<!--bootstrap插件-->
<link rel="stylesheet" type="text/css" th:href="@{/js/plugins/bootstrap/bootstrap/css/bootstrap.min.css}"/>
<link rel="stylesheet" type="text/css" th:href="@{/js/plugins/bootstrap/bootstrap/css/bootstrap-theme.min.css}"/>
<link rel="stylesheet" type="text/css" th:href="@{/js/plugins/bootstrap/bootstrap-table/bootstrap-table.min.css}"/>
- 添加table標(biāo)簽 放body里
<table id="mytab" class="table table-hover"></table>
放入table標(biāo)簽
js
- 添加bootstrap組件(這里用最簡單的梧税，后續(xù)若有復(fù)雜樣式沦疾，請看官網(wǎng)API)
//bootstrapTable組件
$('#mytab1').bootstrapTable({
method : 'get',
url : "../getPage/queryChampionsDate1",//請求路徑
striped : false, //是否顯示行間隔色
pageNumber : 1, //初始化加載第一頁
pagination : true,//是否分頁
sidePagination : 'server',//server:服務(wù)器端分頁|client：前端分頁
pageSize : 10,//單頁記錄數(shù)
pageList : [ 5, 10, 20, 30 ,50],//可選擇單頁記錄數(shù)
showRefresh : true,//刷新按鈕
queryParams : function(params) {//上傳服務(wù)器的參數(shù)
var temp = {//如果是在服務(wù)器端實現(xiàn)分頁，limit第队、offset這兩個參數(shù)是必須的
limit : params.limit, // 每頁顯示數(shù)量
offset : params.offset, // SQL語句起始索引
STAFF_ID : $("#staffId").val(),
STAFF_NAME : $("#userName").val(),
MOBILE:$("#MOBILE").val()
};
return temp;
},
columns : [ {
field: "state",
checkbox: true,
align: 'center',
}, {
title : '姓名',
field : 'name',
//sortable : true
} ]
});
對比前端分頁這里變更的內(nèi)容不多如下圖
image.png
其中 下邊內(nèi)容是必須的
limit : params.limit, // 每頁顯示數(shù)量
offset : params.offset, // SQL語句起始索引
controller
-獲取前臺數(shù)據(jù) （dao層代碼省略）
/**
* 數(shù)據(jù)請求
* @param request
* @return
*/
@RequestMapping("/queryChampionsDate1")
@ResponseBody
public JSONObject queryChampionsDate1(HttpServletRequest request, HttpServletResponse response){
JSONObject res = new JSONObject();
JSONArray resArray = new JSONArray();
//id 姓名 屬性 聯(lián)系電話 商盟地址 創(chuàng)建日期
for (int i = 0; i<10 ;i++){
JSONObject resIndex = new JSONObject();
resIndex.put("name","李四端"+i);
resArray.add(resIndex);
}
res.put("total",33);
res.put("rows",resArray);
return res;
}
有這些代碼可見哮塞，
共33條，每頁10條斥铺，頁面會分4頁如下圖
image.png
其中 controller層返回是必須是帶有total和rows的json串
res.put("total",33);
res.put("rows",resArray);
拓展：一般公司中前后臺傳值不會是這種彻桃，大部分都是帶有編碼的自定義的返回值，這時候怎么辦晾蜘？
- 如下格式
{
"CODE": "0000",
"DATA": {
"TOTAL": 4,
"PAGE_INDEX": 0,
"PAGE_SIZE": 4,
"LEADER_INFO": [
{
"STAFF_ID": "hasc-yangsq17",
"STAFF_NAME": "張三",
"MOBILE": "13288888888"
},
{
"STAFF_ID": "ha-zhangmeng16",
"STAFF_NAME": "張三",
"MOBILE": "13288888888"
}
]
},
"DESC": "調(diào)用成功"
}
bootstrap-table提供了處理這種數(shù)據(jù)responseHandler的方法。
- 處理上述數(shù)據(jù)(res用來接收controller傳來的json串)
//對返回數(shù)據(jù)加工
responseHandler: function(res) {
if("0000"==res.CODE){
return {
"total": res.DATA.TOTAL,//總頁數(shù)
"rows": res.DATA.LEADER_INFO //數(shù)據(jù)
};
}else {
alert(res.DESC);
return {
"total": 0,//總頁數(shù)
"rows": [] //數(shù)據(jù)
};
}
},
處理完畢眠屎！
bootstrap-table服務(wù)端分頁插件可接受的返回值為帶有total和rows的json串剔交，所以要使用bootstrap-table服務(wù)端分頁插件，就必須處理數(shù)據(jù)格式為帶有total和rows的json串改衩。
前端分頁
SSM整合dome（使用idea搭建maven項目返回前臺json串）
)
