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 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/