在使用过程中，一边看文档一边做，遇到了一些困难的地方，在此记录一下，顺便做个总结：
- 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 }