快速上手:
只需要配置HTML，js 以及controller返回对应的格式即可。
html
- 引入相关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标签 放body里
<table id="mytab" class="table table-hover"></table>
放入table标签
js
- 添加bootstrap组件(这里用最简单的，后续若有复杂样式，请看官网API)
//bootstrapTable组件
$('#mytab').bootstrapTable({
method : 'post',
url : "../getPage/queryChampionsDate",//请求路径
striped : false, //是否显示行间隔色
pageNumber : 1, //初始化加载第一页
pagination : true,//是否分页
sidePagination : 'client',//server:服务器端分页|client：前端分页
pageSize : 10,//单页记录数
pageList : [ 5, 10, 20, 30 ,50],//可选择单页记录数
showRefresh : false,//刷新按钮
queryParams : function(msg) {//上传服务器的参数
var temp = {//如果是在服务器端实现分页，limit、offset这两个参数是必须的
// limit : params.limit, // 每页显示数量
// offset : params.offset, // SQL语句起始索引
//name: $("#name").val(),//按条件搜索
};
return temp;
},
columns : [
{
field: "state",
checkbox: true, //第一栏显示复选框
align: 'center',
},
{
title : '姓名',
field : 'name',
//sortable : true
}
]
});
controller
/**
* 数据请求
* @param request
* @return
*/
@RequestMapping("/queryChampionsDate")
@ResponseBody
public List queryChampionsDate(HttpServletRequest request, HttpServletResponse response){
JSONArray resArray = new JSONArray();
//id 姓名 属性 联系电话 商盟地址 创建日期
for (int i = 0; i<33 ;i++){
JSONObject resIndex = new JSONObject();
resIndex.put("name","李四端"+i);
resArray.add(resIndex);
}
return resArray;
}
最终效果
最终效果
注：服务端查询直接全查就好，前端分页适合数据量小的查询，我们经常用的也是服务端分页
