bootstrap 的分页js组件 bootstrap-table 使用-CSDN博客

一.首先需要导入 bootstrap-table.js，bootstrap-table-zh-CN.js，bootstrap-table.css文件

这几个文件的下载链接：http://download.csdn.net/detail/zhangyabin86/9748534

例如:<link type="text/css" href="css/bootstrap-table.css" rel="stylesheet"/> <script type="text/javascript" src="js/bootstrap-table.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/bootstrap-table-zh-CN.js" charset="UTF-8"></script>

注：bootstrap-table.js文件要先于bootstrap-table-zh-CN.js导入，即放在bootstrap-table-zh-CN.js文件上方

二.调用js中封装的方法加载到jsp页面中

在jsp中加入table标签即可
<table id="winport-table" class="col-xs-12" data-toolbar="#toolbar" ></table>

function tabliList(){
                  $('#winport-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: "自己的url",//这个接口需要处理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,
                        onLoadSuccess:function(data){   //加载成功后的事件
//                            console.log(data);
                        },
                        columns: [{
                            field: 'winportName',
                            title: '商铺名称',
                            align: 'center'
                        }, {
                            field: 'winportPrice',
                            title: '商铺价格',
                            align: 'center'
                        }, {
                            field: 'imgPath',
                            title: '商铺图片',
                            align: 'center'
                        },{
                            field: 'winportAddress',
                            title: '商铺地址',
                            align: 'center'
                        }, {
                            field: 'winportArea',
                            title: '商铺标签',
                            align: 'center'
                        },{
                            field: '',
                            title: '操作',
                            align: 'center',
                            formatter:function(value,row,index){
                                //通过formatter可以自定义列显示的内容
                                //value：当前field的值，即id
                                //row：当前行的数据
                                var a = "<button >修改</button>“；
                                return a;
                            }
                        }],
                        pagination:true
                    });
           }
    bootstrap-table 参数的详细配置可参考官网：http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/

三.服务端接收参数和返回的json格式（后台采用的是springMVC的框架）
request.getParameter("pageNumber"); //获取分页的页数
request.getParameter("pageSize"); //获取分页的条数

查询返回的json格式必须包括rows和total ：rows是返回记录的集合，total是返回的总条数[]
        如：{ "total": 10, "rows": [
        {
            "Field1": "11",
            "Field2": "aa"
        },
        {
            "Field1": "22",
            "Field2": "bb"
        }
    ]
}

转载于:https://my.oschina.net/u/3164447/blog/833025