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

  • 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", //客户端处理分页 服务端:serverpageNumber:"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="#" οnclick="edit(\''+ row.id + '\')">编辑</button> ';var d = '<button href="#"  class="btn btn-default" mce_href="#" οnclick="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="#" οnclick="edit(\''+ row.id + '\')">编辑</button> ';
73                         var d = '<button href="#"  class="btn btn-default" mce_href="#" οnclick="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>

html

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

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会为我们自动生成和分页有关的元素:

效果图:

转载于:https://www.cnblogs.com/net-safe/p/6867643.html

Bootstrap-table学习笔记(二)——前后端分页模糊查询相关推荐

  1. php bootstrap 分页 查询,深入了解Bootstrap table表格插件(二)前后端分页模糊查询...

    这篇文章主要为大家分享了Bootstrap table学习笔记,前后端分页模糊查询,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 在使用过程中,一边看文档一边做,遇到了一些困难的地方,在此记录一下 ...

  2. SpringCloud学习笔记018---SpringBoot前后端分离_集成_SpringSecurity_简单实现

    SpringBoot前后端分离_集成_SpringSecurity_简单实现 1.新建SpringBoot项目,可以使用idea,快速创建    file-create-project->选择w ...

  3. Tp5 前后端分离 模糊查询

    一.模糊查询 正常的查询: function searchList( pi, ps, keyword) {var queryData = {page:pi,size:ps,keyword:keywor ...

  4. VUE基础学习笔记——04前后端交互

    一.URL 地址格式 1.传统形式的 URL 格式:schema://host:port/path?query#fragment (1) schema:协议(http.https.ftp等) (2) ...

  5. Games101学习笔记二(锯齿、模糊等失真的本质)

    文章目录 Aliasing Antialiasing思路 采样前模糊 从频域分析抗锯齿的本质 滤波等于去掉高频信息 滤掉低频部分 滤掉高频部分 高频低频都滤掉 滤波等于卷积也等于平均 采样等于重复频率 ...

  6. pythonsze_python学习笔记二 数据类型(基础篇)

    Python基础 对于Python,一切事物都是对象,对象基于类创建 不同类型的类可以创造出字符串,数字,列表这样的对象,比如"koka".24.['北京', '上海', '深圳' ...

  7. 码匠社区学习笔记(二)

    所需资料 教程视频地址 Bootstrap spring模板 elasticsearch中文社区(想模仿的效果) 码云aAuth 获取授权用户的资料 github第三方授权文档 码匠社区学习笔记(二) ...

  8. 运维开发笔记整理-前后端分离

    运维开发笔记整理-前后端分离 作者:尹正杰  版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.为什么要进行前后端分离 1>.pc, app, pad多端适应 2>.SPA开发式的流 ...

  9. Greedy Match学习笔记二 —— 安慰剂检验与置信区间计算

    Greedy Match学习笔记二 -- 安慰剂检验与置信区间计算 上一节我们介绍了Greedy Match的基本原理.本节中,我们将在不同样本量的情况下分别进行安慰剂检验,以验证Greedy Mat ...

最新文章

  1. windows主机资源Snmp OIDs CPU, Memory, Disk等
  2. drupal与html转换,Drupal 7修改網頁HTML和顯示Title的辦法
  3. windows 命令行远程连接_CentOS系列001:windows远程桌面连接CentOS
  4. [vue-element] ElementUI怎么修改组件的默认样式?
  5. 服务器证书安装配置指南(IIS7)
  6. Python 字典 dict() 函数
  7. dialog窗口编程的入门使用
  8. nginx1.8.1反向代理、负载均衡功能的实现
  9. Android你可能要用到的自定义View分享
  10. 【POJ1442】Black Box
  11. [Code] 收集各种语言对图片的处理算法实现 图片模糊
  12. 虚拟机XP系统突然变卡顿解决办法
  13. 苹果软解ID软件(X.PASSWORD-XIMEI 苹果id锁)--上帝左手汉化组(内附即时更新)
  14. 2021年蓝桥杯省赛JavaB组真题解析
  15. 互联网运营和传统运营,到底有什么区别
  16. 百度编辑器上传图片后转到七牛存储
  17. vuepress打包报错:error Error rendering /:
  18. OpenCV(3.4.1)错误 Assertion failed (chunk.m_size 0xFFFF)
  19. 第101个五四青年节节目观后感
  20. 前端使用jquery.wordexport.js导出word

热门文章

  1. python使用del保留字定义一个函数-函数和代码复用 --Python
  2. linux下载哪个python版本-Linux升级python版本
  3. mybatis中的插件
  4. 千万级到10亿+的疯涨,搜狗商业平台服务化体系实践之路
  5. protobuf repeated类型的使用
  6. libevent中的基本数据结构
  7. window和linux下遍历目录的比较
  8. 使用内部类隐藏实现细节
  9. tp5.0分页样式调控
  10. gulp.js 的安装以及使用