bootstrap-table 前端分页

快速上手:

只需要配置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;
    }

最终效果

最终效果

注：服务端查询直接全查就好，前端分页适合数据量小的查询，我们经常用的也是服务端分页