bootstrap-table分页简单例子以及常见问题（文中带源码）

开发十年，就只剩下这套Java开发体系了 >>>   

在使用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 id="dg"></table>

很简单，就是个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://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/