Bootstrap table学习笔记2 前后端分页模糊查询

在使用过程中，一边看文档一边做，遇到了一些困难的地方，在此记录一下，顺便做个总结：

1、前端分页 2、后端分页 3、模糊查询

前端分页相当简单，在我添加了2w条测试数据的时候打开的很流畅，没有卡顿。

rush:js;"> $(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',{
title: '性别',field: 'sex',{
title: '用户账号',field: 'username',{
title: '手机号',field: 'phone',{
title: '邮箱',field: 'email',{
title: '权限',field: 'rolename',{
title: '操作',formatter:function(value,row,index){
　　　　　　　　　　　　　　//value 能够获得当前列的值
　　　　　　　　　　　　　　//====================================

        var e = '<button href="#" class="btn btn-default" mce_href="#" onclick="edit(\''+ row.id + '\')"&gt;编辑</button> ';
        var d = '<button href="#" class="btn btn-default" mce_href="#" onclick="del(\''+ row.id +'\')"&gt;<a href="https://www.jb51.cc/tag/shanchu/" target="_blank" class="keywords">删除</a></button> ';
        return e+d;
      }
    }
  ]
});

}

考虑到以后的数据会越来越多，前端分页在数据量大的情况下，明显不能满足要求，因此必须要做后端的分页

首先：

sidePagination: "server",//服务器分页

queryParams: queryParams,//传递参数（*）

rush:js;"> //得到查询的参数 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如下：

rush:js;"> $(function(){ a();

});
function a () {
$('#userListTable').bootstrapTable({
url: "/user/getUserList/",contentType: "application/x-www-form-urlencoded",// 列
toobar:'#toolbar',pagination: true,//是否显示刷新按钮
sidePagination: "server",//服务端处理分页
pageNumber:"1",pageSize:"15",Pagelist:[10,undefinedText:'--',uniqueId: "id",queryParams: queryParams,//传递参数（*）
columns: [
{
title: 'ID',index){
var e = '<button href="#" class="btn btn-default" mce_href="#" onclick="edit(\''+ row.id + '\')">编辑 ';
var d = '<button href="#" class="btn btn-default" mce_href="#" onclick="del(\''+ row.id +'\')">删除 ';
return e+d;
}
}
]
});

//得到<a href="https://www.jb51.cc/tag/chaxun/" target="_blank" class="keywords">查询</a>的参数
function queryP<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>ms (p<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>ms) {
  var temp = {  //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
    pageSize: p<a href="https://www.jb51.cc/tag/ara/" target="_blank" class="keywords">ara</a>ms.pageSize,};
  return temp;
};

}

//搜索
function serachUser() {
$("#userListTable").bootstrapTable('refresh');
}

*值得注意

的是：

获取数据，这时会将请求的content type默认设置为 text/plain，这样在服务端直接通过 @RequestParam参数映射是获取不到的。以及：

HTML:

rush:xhtml;">

Box">

用户姓名：

Box">

用户账号：

用户Email：

搜索" onclick="serachUser()"/>

不论是初始化表格还是搜索的时候传入后台的数据如下：

pageSize=15 pageNumber=1 username= name= sex= phone= email=

返回数据：

我们要返回两个值： rows total

rows:

我们查询到的数据　　

total:

数据总数（此总数指的是所有数据的总数，并不是单页的数量，比如说我有user表中有100条数据，我的limit 0,15，所以我的rows中有15条数据，但是total=100）

rush:js;"> { "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","phone": "13245678910","rolename": "","username": "admin2" } ] }

有了total总数，加上之前的pageSize以及rows，bootStraptable会为我们自动生成和分页有关的元素：

效果图：