bootstrap-table分页简单例子以及常见问题

在使用bootstrap-table分页遇到不少问题，而且查了不少资料，这里总结一下。
1，导入JS错误

表现：加入bootstrap-table-zh-CN但是没有汉化，以及提示TypeError: $(...).bootstrapTable is not a function这种类似的错误。

这些都是导入的顺序不对，下面贴一份我的导入顺序

<script type="text/javascript"

src="${pageContext.request.contextPath}/js/jquery-3.1.0.min.js"></script>

<script type="text/javascript"

src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>

<script type="text/javascript"

src="${pageContext.request.contextPath}/js/bootstrap-table.min.js"></script>

<script type="text/javascript"

src="${pageContext.request.contextPath}/js/bootstrap-table-zh-CN.min.js"></script>

2，传入后台的参数不对

    bootstrap-table有两种传递方式，data-query-params-type默认为limit，此时传递给后台的就是limit, offset, search, sort, order。换成其他值，一般我们选择为空串，传递的参数就是pageSize, pageNumber, searchText, sortName, sortOrder.。根据你选择不同，后台的逻辑也要改变。

3，想改变接口的参数

很多时候我们都是自己的方式命名，并不喜欢他的默认，我们只要写一个函数即可

function queryParams(params) {

        return {
            pageSize : params.pageSize,
            page : params.pageNumber
        };

}

此处page，pageSize就是我后台默认接收的参数名称。

然后修改queryParams参数的值为我们写的函数queryParams
4，返回类型

现在一般都默认用JSON，我一开始以为返回的数据是我自己定义出来的JSON串，然后在前台用JS解析，后来发现并不是这么回事，返回的数据格式按照total和rows的键值对来的，total就是总共的数据，rows对应的是查询出来的数据。
附：源码部分

Controller部分

@RequestMapping("/findUser")

public @ResponseBody Map<String,Object> show(int page,int pageSize){
     Map<String,Object> map =new HashMap<>();
     PageInfo<User> listUser = service.listUser(page, pageSize);//这里是查询逻辑，忽略
     map.put("total", listUser.getTotal());//总共数据量
     map.put("rows", listUser.getList());//数据
     return map;//返回json（利用框架转化）
}

前端显示标签部分

很简单，就是个table，下面是配置的JS $('#dg').bootstrapTable({ url : '${pageContext.request.contextPath}/findUser.do',//url默认走的是get striped : true, dataType: 'json', pagination : true, pageList : [ 3, 5, 20 ], pageSize : 3, pageNumber : 1, queryParamsType: "",//这里只是选择适合我后台的逻辑，可以选择传入页数和显示数量 queryParams : queryParams, sidePagination : 'server',//设置为服务器端分页 columns : [ { field : 'userName',//返回数据对应的字段 title : '标题' }, { field : 'userPassword', title : '时间' } ] }); 还有自己改变传入后台数据的函数 function queryParams(params) { return { pageSize : params.pageSize,//键就是自己后台的参数 page : params.pageNumber }; } 以上就是全部设置，下面再附一个文档，方便自己修改属性 http://www.developcls.com http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/