Bootstrap table 服务器端分页示例

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

前端代码块

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

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            });        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

在前端通过请求获取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);    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

完成上述代码，即可实现服务器端自动分页，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"
1

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

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