16122二、Bootstrap table 服务器端分页示例

bootstrap版本 为 3.X

bootstrap-table.min.css 
bootstrap-table-zh-CN.min.js 
bootstrap-table.min.js

前端bootstrap+jQuery，服务端使用spring MVC实现restful风格服务

前端代码块

<table id="test-table" class="col-xs-12" data-toolbar="#toolbar">

function initTable(){ $('#test-table').bootstrapTable({ method: 'get', toolbar: '#toolbar', //工具按钮用哪一个容器 striped: true, //是否显示行间隔色 cache: false, //是否使用缓存，默认为true，因此通常状况下须要设置一下这个属性（*） pagination: true, //是否显示分页（*） sortable: false, //是否启用排序 sortOrder: "asc", //排序方式 pageNumber:1, //初始化加载第一页，默认第一页 pageSize: 10, //每页的记录行数（*） pageList: [10, 25, 50, 100], //可供选择的每页的行数（*） url: "/testProject/page4list.json",//这个接口须要处理bootstrap table传递的固定参数 queryParamsType:'', //默认值为 'limit' ,在默认状况下 传给服务端的参数为：offset,limit,sort // 设置为 '' 在这种状况下传给服务器的参数为：pageSize,pageNumber //queryParams: queryParams,//前端调用服务时，会默认传递上边提到的参数，若是须要添加自定义参数，能够自定义一个函数返回请求参数 sidePagination: "server", //分页方式：client客户端分页，server服务端分页（*） //search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，因此，我的感受意义不大 strictSearch: true, //showColumns: true, //是否显示全部的列 //showRefresh: true, //是否显示刷新按钮 minimumCountColumns: 2, //最少容许的列数 clickToSelect: true, //是否启用点击选中行 searchOnEnterKey: true, columns: [{ field: 'id', title: 'id', align: 'center' }, { field: 'testkey', title: '测试标识', align: 'center' }, { field: 'testname', title: '测试名字', align: 'center' },{ field: 'id', title: '操做', align: 'center', formatter:function(value,row,index){ //经过formatter能够自定义列显示的内容 //value：当前field的值，即id //row：当前行的数据 var a = '<a href="" >测试</a>'; } }], pagination:true }); }

 

在前端经过请求获取table数据时，bootstrap table会默认拼一个 searchText的参数，来支持查询功能。

服务端代码

@RequestMapping(value = "/page4list.json") public void page4list(Integer pageSize, Integer pageNumber, String searchText, HttpServletRequest request, HttpServletResponse response) { //搜索框功能 //当查询条件中包含中文时，get请求默认会使用ISO-8859-1编码请求参数，在服务端须要对其解码 if (null != searchText) { try { searchText = new String(searchText.getBytes("ISO-8859-1"), "UTF-8"); } catch (Exception e) { e.printStackTrace(); } } //在service经过条件查询获取指定页的数据的list List<MwmsgType> list = mwMsgQueueService.page4List(pageSize, pageNumber, searchText); //根据查询条件，获取符合查询条件的数据总量 int total = mwMsgQueueService.queryCountBySearchText(searchText); //本身封装的数据返回类型，bootstrap-table要求服务器返回的json数据必须包含：totlal，rows两个节点 PageResultForBootstrap page = new PageResultForBootstrap(); page.setTotal(total); page.setRows(list); //page就是最终返回给客户端的数据结构，能够直接返回给前端 //下边这段，只是我本身的代码有自定义的spring HandlerInterceptor处理返回值，能够忽略。 request.setAttribute(Constants.pageResultData, page); }

完成上述代码，便可实现服务器端自动分页，bootstrap-table根据服务器端返回的total，以及table设定的pageSize，自动生成分页的页面元素，每次点击下一页或者指定页码，bootstrap-table会自动给参数pageNumber赋值，服务器返回指定页的数据。

若是发送的是post请求，由于bootstap table使用的是ajax方式获取数据，这时会将请求的content type默认设置为 text/plain，这样在服务端直接经过 @RequestParam参数映射是获取不到的。

这时就须要在bootstrap-table的参数列表中显式设置

contentType: "application/x-www-form-urlencoded"

设置成form表单的形式，tomcat内部就会自动将requset payload中的数据部分解析放到request.getParameter()中，以后就能够直接经过@RequestParam映射参数获取

post的处理参考了下面这个哥们的博文，在此感谢！

参考连接