1.官网下载bootstrap,bootstrap-table
http://bootstrap-table.wenzhixin.net.cn/
2.引入css和js
此处引用的是themeleaf写法
<link th:href="@{/bootstrap/css/bootstrap.css}" rel="stylesheet">
<link th:href="@{/bootstrap/css/bootstrap-table.css}" rel="stylesheet">
<script th:src="@{/jquery/jquery-1.11.1.min.js}" ></script>
<script th:src="@{/bootstrap/js/bootstrap.js}" ></script>
<script th:src="@{/bootstrap/js/bootstrap-table.js}" ></script>3.html代码
<div id="content">
<table id="table"></table>
<div id="toolbar" class="btn-group">
<button id="btn_add" type="button" class="btn btn-danger" data-toggle="modal" data-target="#addModal">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>修改用户信息
</button>
<button id="btn_delete" type="button" class="btn btn-info">
<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除用户信息
</button>
</div>
</table>
</div>4.script
<script>
$(function(){
$('#table').bootstrapTable({
url: '',
method: 'post',
contentType:"application/x-www-form-urlencoded",//method为post时必须加上这个,否则接收不到参数
dataType: 'json',
queryParams:function queryParams(params) { //设置查询参数
var param = {
pageSize: params.limit, //每页多少条数据
pageNumber: params.offset, //从第几条数据开始
searchText: params.search //搜索框
};
//alert("pageSize="+params.limit+"pageNumber="+params.offset+"searchText="+searchText);
return param;
},
height: 560,
toolbar: '#toolbar', //工具按钮用哪个容器
striped: true, //是否显示行间隔色
pagination: true, //是否显示分页（*）
maintainSelected: true, //设置为 true 在点击分页按钮或搜索按钮时，将记住checkbox的选择项
sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*）
pageNumber: 1, //初始化加载第一页，默认第一页
pageSize: 10, //每页的记录行数（*）
pageList: [10, 25, 50, 100], //可供选择的每页的行数（*）
search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
strictSearch: true, //设置为 true启用 全匹配搜索，否则为模糊搜索
showRefresh: true, //是否显示刷新按钮
minimumCountColumns: 2, //最少允许的列数
clickToSelect: true, //是否启用点击选中行
uniqueId: "userid", //每一行的唯一标识，一般为主键列\
sortStable: true,
columns: [
{checkbox: true},
{field: 'userid', title: 'ID'},
{field: 'username', title: '姓名'},
{field: 'userno', title: '用户编号'},
{field: 'login', title: '登录名'},
{field: 'pw', title: '密码'},
{field: 'sex', title: '性别'},
{field: 'birthday', title: '出生年月',
formatter: function (row,index,value) {
if (value != null) {
var date = new Date(value);
return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
}
}},
{field: 'telephone', title: '联系电话'},
{field: 'idcard', title: '身份证号'},
{field: 'email', title: '邮箱'}
]
});
});
</script>5.controller部分代码
@RequestMapping("/queryAll")
@ResponseBody
public String queryAll(Integer pageSize, Integer pageNumber, String searchText, HttpServletRequest request,
HttpServletResponse response) throws Exception{
//搜索框功能
if (null != searchText) {
searchText = "'%"+searchText+"%'";//sqlserver模糊查询
}else{
searchText = "'%"+""+"%'";//sqlserver模糊查询
}
//在service通过条件查询获取指定页的数据的list
List<User> list = userService.queryAll(pageSize, pageNumber, searchText);
System.out.println(list.size());
//根据查询条件，获取符合查询条件的数据总量
Integer total = userService.pageCount(searchText);
//System.out.println(total);
//自己封装的数据返回类型，bootstrap-table要求服务器返回的json数据必须包含：totlal，rows两个节点(sidePagination: "server"服务端分页)
Map<String, Object> maps = new HashMap<>();
maps.put("rows",list);
maps.put("total",total);
//System.out.println(maps.size());
return mapToJson(maps);6.mapper
//sqlserver分页查询注解方式,由于采用#{}取值方式,默认为变量添加单引号导致语句保错,此处采用${}取值方式
@Select("select top ${pageSize} * from user_info where userid not in (select top ${pageNumber} userid from user_info) " +
"and (username like ${searchText} or login like ${searchText} )")
public List<User> queryAll(@Param("pageSize") Integer pageSize,@Param("pageNumber") Integer pageNumber,@Param("searchText") String searchText);
@Select("select count(1) from user_info where username like ${searchText} or login like ${searchText}")
@ResultType(Integer.class)
public Integer queryCount(@Param("searchText") String searchText);