在使用過程中，一邊看文檔一邊做，遇到了一些困難的地方，在此記錄一下，順便做個總結：
- 1，前端分頁
- 2，后端分頁
- 3，模糊查詢
前端分頁相當簡單，在我添加了2w條測試數據的時候打開的很流暢，沒有卡頓。
$(function(){ a(); }); function a () { $('#yourtable').bootstrapTable({ url: "/user/getUserList/", method:"post", dataType: "json", striped:true,//隔行變色 cache:false, //是否使用緩存 showColumns:false,// 列 pagination: true, //分頁 sortable: false, //是否啟用排序 singleSelect: false, search:false, //顯示搜索框 buttonsAlign: "right", //按鈕對齊方式 showRefresh:false,//是否顯示刷新按鈕 sidePagination: "client", //客戶端處理分頁 服務端：server pageNumber:"1", //啟用插件時默認頁數 pageSize:"15", //啟用插件是默認每頁的數據條數 pageList:[10, 25, 50, 100], //自定義每頁的數量 undefinedText:'--', uniqueId: "id", //每一行的唯一標識，一般為主鍵列 queryParamsType:'', columns: [ { title: 'ID', field: 'id', align: 'center', valign: 'middle', }, { title: '用戶姓名', field: 'name', align: 'center', valign: 'middle', }, { title: '性別', field: 'sex', align: 'center', }, { title: '用戶賬號', field: 'username', align: 'center', }, { title: '手機號', field: 'phone', align: 'center', }, { title: '郵箱', field: 'email', align: 'center', }, { title: '權限', field: 'rolename', align: 'center', }, { title: '操作', field: 'id', align: 'center', formatter:function(value,row,index){
//value 能夠獲得當前列的值
//====================================
var e = '<button href="#" class="btn btn-default" mce_href="#" onclick="edit(\''+ row.id + '\')">編輯</button> '; var d = '<button href="#" class="btn btn-default" mce_href="#" onclick="del(\''+ row.id +'\')">刪除</button> '; return e+d; } } ] }); }
考慮到以后的數據會越來越多，前端分頁在數據量大的情況下，明顯不能滿足要求，因此必須要做后端的分頁
首先：
sidePagination: "server"，//服務器分頁
queryParams: queryParams,//傳遞參數（*）
//得到查詢的參數 function queryParams (params) { var temp = { //這里的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的 pageSize: params.pageSize, //頁面大小 pageNumber: params.pageNumber, //頁碼 username: $("#search_username").val(), name:$("#search_name").val(), sex:$("#search_sex").val(), phone:$("#search_mobile").val(), email:$("#search_email").val(), }; return temp; };
這里傳入了每頁顯示的條數、以及當前的頁數。如果需要查詢，則需要傳入需要查詢的條件。
具體的js如下：
1 $(function(){ 2 a(); 3 4 }); 5 function a () { 6 $('#userListTable').bootstrapTable({ 7 url: "/user/getUserList/", 8 method:"post", 9 dataType: "json", 10 contentType: "application/x-www-form-urlencoded", 11 striped:true,//隔行變色 12 cache:false, //是否使用緩存 13 showColumns:false,// 列 14 toobar:'#toolbar', 15 pagination: true, //分頁 16 sortable: false, //是否啟用排序 17 singleSelect: false, 18 search:false, //顯示搜索框 19 buttonsAlign: "right", //按鈕對齊方式 20 showRefresh:false,//是否顯示刷新按鈕 21 sidePagination: "server", //服務端處理分頁 22 pageNumber:"1", 23 pageSize:"15", 24 pageList:[10, 25, 50, 100], 25 undefinedText:'--', 26 uniqueId: "id", //每一行的唯一標識，一般為主鍵列 27 queryParamsType:'', 28 queryParams: queryParams,//傳遞參數（*） 29 columns: [ 30 { 31 title: 'ID', 32 field: 'id', 33 align: 'center', 34 valign: 'middle', 35 }, 36 { 37 title: '用戶姓名', 38 field: 'name', 39 align: 'center', 40 valign: 'middle', 41 }, 42 { 43 title: '性別', 44 field: 'sex', 45 align: 'center', 46 }, 47 { 48 title: '用戶賬號', 49 field: 'username', 50 align: 'center', 51 }, 52 { 53 title: '手機號', 54 field: 'phone', 55 align: 'center', 56 }, 57 { 58 title: '郵箱', 59 field: 'email', 60 align: 'center', 61 }, 62 { 63 title: '權限', 64 field: 'rolename', 65 align: 'center', 66 }, 67 { 68 title: '操作', 69 field: 'id', 70 align: 'center', 71 formatter:function(value,row,index){ 72 var e = '<button href="#" class="btn btn-default" mce_href="#" onclick="edit(\''+ row.id + '\')">編輯</button> '; 73 var d = '<button href="#" class="btn btn-default" mce_href="#" onclick="del(\''+ row.id +'\')">刪除</button> '; 74 return e+d; 75 } 76 } 77 ] 78 }); 79 80 //得到查詢的參數 81 function queryParams (params) { 82 var temp = { //這里的鍵的名字和控制器的變量名必須一直，這邊改動，控制器也需要改成一樣的 83 pageSize: params.pageSize, //頁面大小 84 pageNumber: params.pageNumber, //頁碼 85 username: $("#search_username").val(), 86 name:$("#search_name").val(), 87 sex:$("#search_sex").val(), 88 phone:$("#search_mobile").val(), 89 email:$("#search_email").val(), 90 }; 91 return temp; 92 }; 93 } 94 95 //搜索 96 function serachUser() { 97 $("#userListTable").bootstrapTable('refresh'); 98 }
*值得注意的是：
contentType: "application/x-www-form-urlencoded", //因為bootstap table使用的是ajax方式獲取數據，這時會將請求的content type默認設置為 text/plain，這樣在服務端直接通過 @RequestParam參數映射是獲取不到的。
以及：
HTML:
1 <div id="page-content" class="animated fadeInRight"> 2 <div class="col-sm-4 col-md-3 col-lg-3" style="width: 100%;"> 3 <form id="search_User"> 4 <div class="panel-body search_box"> 5 <div class="search_div"> 6 <label for="search_name">用戶姓名：</label> 7 <input type="text" class="form-control" id="search_name" name="UserV2.name" > 8 </div> 9 <div class="search_div"> 10 <label for="search_mobile">手機號：</label> 11 <input type="text" class="form-control" id="search_mobile" name="UserV2.phone" > 12 </div> 13 <div class="search_div"> 14 <label for="search_sex">性別：</label> 15 <select class="form-control" id="search_sex" name="UserV2.sex"><option value="">---請選擇---</option><option value="男">男</option><option value="女">女</option></select> 16 </div> 17 </div> 18 <div class="panel-body search_box"> 19 <div class="search_div"> 20 <label for="search_name">用戶賬號：</label> 21 <input type="text" class="form-control" id="search_username" name="UserV2.username" > 22 </div> 23 <div class="search_div"> 24 <label for="search_name">用戶Email：</label> 25 <input type="text" class="form-control" id="search_email" name="UserV2.email" > 26 </div> 27 <div class="search_div" style="text-align: center;"> 28 <input type="button" class="btn btn-primary btn_search" value="搜索" onclick="serachUser()"/> 29 </div> 30 </div> 31 </form> 32 </div> 33 <table id="userListTable" ></table> 34 </div>
不論是初始化表格還是搜索的時候傳入后台的數據如下：
pageSize=15 pageNumber=1 username= name= sex= phone= email=
返回數據：
我們要返回兩個值： rows total
rows:我們查詢到的數據
total:數據總數（此總數指的是所有數據的總數，並不是單頁的數量，比如說我有user表中有100條數據，我的limit 0,15，所以我的rows中有15條數據，但是total=100）
{ "total": 2, "rows": [ { "email": "39385908@qq.com", "id": 1, "name": "鄧某某", "password": "", "phone": "12345678911", "rolename": "平台管理員", "sex": "男", "username": "admin" }, { "email": "2222@222.com", "id": 8, "name": "王小二1", "password": "", "phone": "13245678910", "rolename": "", "sex": "男", "username": "admin2" } ] }
有了total總數，加上之前的pageSize以及rows，bootStraptable會為我們自動生成和分頁有關的元素：
效果圖：
