快速上手:
只需要配置HTML劲蜻，js 以及controller返回對(duì)應(yīng)的格式即可。
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ù)雜樣式，請(qǐng)看官網(wǎng)API)
//bootstrapTable組件
$('#mytab').bootstrapTable({
method : 'post',
url : "../getPage/queryChampionsDate",//請(qǐng)求路徑
striped : false, //是否顯示行間隔色
pageNumber : 1, //初始化加載第一頁
pagination : true,//是否分頁
sidePagination : 'client',//server:服務(wù)器端分頁|client：前端分頁
pageSize : 10,//單頁記錄數(shù)
pageList : [ 5, 10, 20, 30 ,50],//可選擇單頁記錄數(shù)
showRefresh : false,//刷新按鈕
queryParams : function(msg) {//上傳服務(wù)器的參數(shù)
var temp = {//如果是在服務(wù)器端實(shí)現(xiàn)分頁饲窿，limit煌寇、offset這兩個(gè)參數(shù)是必須的
// limit : params.limit, // 每頁顯示數(shù)量
// offset : params.offset, // SQL語句起始索引
//name: $("#name").val(),//按條件搜索
};
return temp;
},
columns : [
{
field: "state",
checkbox: true, //第一欄顯示復(fù)選框
align: 'center',
},
{
title : '姓名',
field : 'name',
//sortable : true
}
]
});
controller
/**
* 數(shù)據(jù)請(qǐng)求
* @param request
* @return
*/
@RequestMapping("/queryChampionsDate")
@ResponseBody
public List queryChampionsDate(HttpServletRequest request, HttpServletResponse response){
JSONArray resArray = new JSONArray();
//id 姓名 屬性 聯(lián)系電話 商盟地址 創(chuàng)建日期
for (int i = 0; i<33 ;i++){
JSONObject resIndex = new JSONObject();
resIndex.put("name","李四端"+i);
resArray.add(resIndex);
}
return resArray;
}
最終效果
最終效果
注：服務(wù)端查詢直接全查就好，前端分頁適合數(shù)據(jù)量小的查詢逾雄，我們經(jīng)常用的也是服務(wù)端分頁
