Bootstrap Table 实现分页效果

html代码

<div>
    <table id="table_list"></table>
</div>
注：一定要写id名称

j s代码

<script>
    $(document).ready(function () {
        //初始化表格,动态从服务器加载数据
        $("#table_list").bootstrapTable({
            //使用get请求到服务器获取数据
            method: "POST",
            //必须设置，不然request.getParameter获取不到请求参数
            contentType: "application/x-www-form-urlencoded",
            //获取数据的Servlet地址
            url: "/api/list",
            //启动分页
            pagination: true,
            //每页显示的记录数
            pageSize: 10,  // 需要的参数
            //当前第几页
            pageNumber: 1, // 需要的参数，一般为1
            //记录数可选列表
            pageList: [10, 20, 30, 40],
            //表示服务端分页
            sidePagination: "server",
            //设置为undefined可以获取pageNumber，pageSize，searchText，sortName，sortOrder
            //设置为limit可以获取limit, offset, search, sort, order
            queryParamsType: "undefined",  // 这种方法下，一定要用"undefined"
            //json数据解析
            responseHandler: function(res) {
                return {
                    "rows": res.data.list,   // 解析并获得json数据的时候观察其结构
                    "total": res.data.total
                };
            },
            //数据列
            columns: [{
                title: "昵称",
                field: "nickName"
            },{
                title: "卡号",
                field: "cardNum"
            },{
                title: "会员号",
                field: "memberNum"
            },{
                title: "扣款状态",
                field: "tradeState"
            },{
                title: "付款时间",
                field: "tradeEndTime"
            },{
                title: "充值状态",
                field: "status"
              }
            }]
        });

json字符串

    "code":20000,
    "count":100,
    "data":{
        "list":[
            {
                "id":912,
                "memberNum":"A01150405016",
                "cardNum":"401 101067",
                "tradeEndTime":"2017-09-08 23:22:46",
                "status":0,
                "tradeState":"SUCCESS",
                "nickName":"张三"
            },
            {
                "id":912,
                "memberNum":"A01150405016",
                "cardNum":"401 101067",
                "tradeEndTime":"2017-09-08 23:22:46",
                "status":0,
                "tradeState":"SUCCESS",
                "nickName":"里斯"
            },
            {
                "id":911,
                "memberNum":"A01150405016",
                "cardNum":"401 101067",
                "tradeEndTime":"2017-09-08 23:16:57",
                "status":0,
                "tradeState":"SUCCESS",
                "nickName":"王麻子"
            }
        ],
        "total":56
    },
    "message":"成功"
}

controller代码

@RequestMapping(value = { "/api/list" })
@ResponseBody
public MessageBean list(
        Integer pageSize,  // 每页显示条数
        Integer pageNumber,  // 当前页数
        ModelMap map // 要返回页面的数据
) {
    // 列表的数据查询
    StringBuffer sql = new StringBuffer();
    sql.append("SELECT\n" +
            "a.`id`,\n" +
            "a.`member_num` memberNum,\n" +
            "a.`card_num` cardNum,\n" +
            "date_format(a.`trade_end_time`, '%Y-%m-%d %H:%i:%s') tradeEndTime,\n" +
            "a.`status`,\n" +
            "a.`trade_state` tradeState,\n" +
            "b.`nickname` nickName\n" +
            "FROM `prepay_order` a INNER JOIN `wx_user` b\n" +
            "ON a.`openId` = b.`openid`\n" +
            "WHERE 1=1\n" +
            "AND a.`trade_state`= 'SUCCESS'\n" +
            "ORDER BY a.`trade_end_time` DESC\n");

    // 分页查询语句
    if (pageSize != null && pageNumber != null) {
        Integer a = (pageNumber - 1) * pageSize;  // 查询开始处
        sql.append("limit " + a + "," + pageSize);
    }

    // 按条件查询出来的总数，不能与上面的参杂在一起
    StringBuffer countSql = new StringBuffer();
    countSql.append("SELECT\n" +
            "COUNT(*) total\n" +
            "FROM `prepay_order` a INNER JOIN `wx_user` b\n" +
            "ON a.`openId` = b.`openid`\n" +
            "WHERE 1=1\n" +
            "AND a.`trade_state`= 'SUCCESS'\n" +
            "ORDER BY a.`trade_end_time` DESC");
    // 封装返回数据
    map.put("data", mybatisDao.getMapList(sql));
    map.put("total", mybatisDao.getOneList(countSql).get("total"));

    return new MessageBean(MessageBean.CODE_SUCCESS, 
               MessageBean.CODE_SUCCESS_MSG, map, 100L
    );
}
注：
   1. 这里放回的map将数据直接放回到页面，页面取值的时候需要观察json的结构
   2. pageSize、pageNumber、total 三个参数要与前端的需要的参数保持一致
   3. 不用在意sql和mybatisDao是什么, 最终目的是使用到pageSize和pageNumber
      两个参数得到json格式的list数据，返回到页面的参数除了list之外，还需
      要返回返回在该条件的查询到的总条数total