深入了解Bootstraptable表格插件（二）前后端分页模糊查询

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

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

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

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

首先：

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

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

这里传入了每页显示的条数、以及当前的页数。如果需要查询，则需要传入需要查询的条件。

具体的js如下：

*值得注意的是：

contentType: "application/x-www-form-urlencoded",　　//因为bootstap table使用的是ajax方式获取数据，这时会将请求的content type默认设置为 text/plain，这样在服务端直接通过 @RequestParam参数映射是获取不到的。
以及：

HTML:

<p id="page-content" class="animated fadeInRight">
  <p class="col-sm-4 col-md-3 col-lg-3" style="width: 100%;">
    <form  id="search_User">
      <p class="panel-body search_box">
        <p class="search_p">
          <label for="search_name">用户姓名：</label>
          <input type="text" class="form-control" id="search_name" name="UserV2.name" >
        </p>
        <p class="search_p">
          <label for="search_mobile">手机号：</label>
          <input type="text" class="form-control" id="search_mobile" name="UserV2.phone" >
        </p>
        <p class="search_p">
          <label for="search_sex">性别：</label>
          <select class="form-control" id="search_sex" name="UserV2.sex"><option value="">---请选择---</option><option value="男">男</option><option value="女">女</option></select>
        </p>
      </p>
      <p class="panel-body search_box">
        <p class="search_p">
          <label for="search_name">用户账号：</label>
          <input type="text" class="form-control" id="search_username" name="UserV2.username" >
        </p>
        <p class="search_p">
          <label for="search_name">用户Email：</label>
          <input type="text" class="form-control" id="search_email" name="UserV2.email" >
        </p>
        <p class="search_p" style="text-align: center;">
          <input type="button" class="btn btn-primary btn_search" value="搜索" onclick="serachUser()"/>
        </p>
      </p>
    </form>
  </p>
  <table id="userListTable" ></table>
</p>

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

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

返回数据：

我们要返回两个值： rows total

rows:我们查询到的数据　　

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

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

效果图：

【相关推荐】

1. 免费js在线视频教程

2. JavaScript中文参考手册

3. php.cn独孤九贱（3）－JavaScript视频教程

以上就是深入了解Bootstrap table表格插件（二）前后端分页模糊查询的详细内容，更多请关注Gxl网其它相关文章！