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


Posted in Javascript onMay 18, 2017

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

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如下:

$(function(){
  a();

});
  function a () {
    $('#userListTable').bootstrapTable({
      url: "/user/getUserList/",
      method:"post",
      dataType: "json",
      contentType: "application/x-www-form-urlencoded",
      striped:true,//隔行变色
      cache:false,  //是否使用缓存
      showColumns:false,// 列
      toobar:'#toolbar',
      pagination: true, //分页
      sortable: false,           //是否启用排序
      singleSelect: false,
      search:false, //显示搜索框
      buttonsAlign: "right", //按钮对齐方式
      showRefresh:false,//是否显示刷新按钮
      sidePagination: "server", //服务端处理分页
      pageNumber:"1",
      pageSize:"15",
      pageList:[10, 25, 50, 100],
      undefinedText:'--',
      uniqueId: "id", //每一行的唯一标识,一般为主键列
      queryParamsType:'',
      queryParams: queryParams,//传递参数(*)
      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){
            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;
          }
        }
      ]
    });

    //得到查询的参数
    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;
    };
  }

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

*值得注意的是:

contentType:  "application/x-www-form-urlencoded",

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

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

HTML:

<div id="page-content" class="animated fadeInRight">
  <div class="col-sm-4 col-md-3 col-lg-3" style="width: 100%;">
    <form  id="search_User">
      <div class="panel-body search_box">
        <div class="search_div">
          <label for="search_name">用户姓名:</label>
          <input type="text" class="form-control" id="search_name" name="UserV2.name" >
        </div>
        <div class="search_div">
          <label for="search_mobile">手机号:</label>
          <input type="text" class="form-control" id="search_mobile" name="UserV2.phone" >
        </div>
        <div class="search_div">
          <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>
        </div>
      </div>
      <div class="panel-body search_box">
        <div class="search_div">
          <label for="search_name">用户账号:</label>
          <input type="text" class="form-control" id="search_username" name="UserV2.username" >
        </div>
        <div class="search_div">
          <label for="search_name">用户Email:</label>
          <input type="text" class="form-control" id="search_email" name="UserV2.email" >
        </div>
        <div class="search_div" style="text-align: center;">
          <input type="button" class="btn btn-primary btn_search" value="搜索" onclick="serachUser()"/>
        </div>
      </div>
    </form>
  </div>
  <table id="userListTable" ></table>
</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会为我们自动生成和分页有关的元素:

效果图:

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

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
取得传值的函数
Oct 27 Javascript
jquery统计用户选中的复选框的个数
Jun 06 Javascript
使用javascript实现判断当前浏览器
Apr 14 Javascript
javascript背景时钟实现方法
Jun 18 Javascript
JavaScript实现的类字典插入或更新方法实例
Jul 10 Javascript
jQuery点击输入框显示验证码图片
May 19 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
Jan 20 Javascript
Javascript之图片的延迟加载的实例详解
Jul 24 Javascript
javaScript封装的各种写法
Aug 14 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
node跨域转发 express+http-proxy-middleware的使用
May 31 Javascript
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
May 13 Javascript
BootStrap 导航条实例代码
May 18 #Javascript
AngularJS全局警告框实现方法示例
May 18 #Javascript
第一次记录Bootstrap table学习笔记(1)
May 18 #Javascript
原生js轮播特效
May 18 #Javascript
js实现放大镜特效
May 18 #Javascript
vue v-on监听事件详解
May 17 #Javascript
vue v-model表单控件绑定详解
May 17 #Javascript
You might like
php 文件上传系统手记
2009/10/26 PHP
php正则过滤html标签、空格、换行符的代码(附说明)
2010/10/25 PHP
PHP setcookie设置Cookie用法(及设置无效的问题)
2011/07/13 PHP
一些php项目中比较通用的php自建函数的详解
2013/06/06 PHP
php三种实现多线程类似的方法
2015/10/30 PHP
PHP二维数组去重算法
2016/12/17 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
又一个图片自动缩小的JS代码
2007/03/10 Javascript
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
新手常遇到的一些jquery问题整理
2010/08/16 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
JS正则表达式大全(整理详细且实用)
2013/11/14 Javascript
IE中getElementsByName()对有些元素无效的解决方案
2014/09/28 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
JS网页在线获取鼠标坐标值的方法
2015/02/28 Javascript
jQuery实现本地预览上传图片功能
2016/01/08 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
2016/08/05 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
2017/02/23 Javascript
jQuery Chosen通用初始化
2017/03/07 Javascript
JavaScript ES6中export、import与export default的用法和区别
2017/03/14 Javascript
element-ui循环显示radio控件信息的方法
2018/08/24 Javascript
微信小程序自定义弹窗实现详解(可通用)
2019/07/04 Javascript
vue开发简单上传图片功能
2020/06/30 Javascript
Python中的赋值、浅拷贝、深拷贝介绍
2015/03/09 Python
Python用户推荐系统曼哈顿算法实现完整代码
2017/12/01 Python
Python中协程用法代码详解
2018/02/10 Python
python文本数据相似度的度量
2018/03/12 Python
对Django url的几种使用方式详解
2019/08/06 Python
浅谈Django2.0 加xadmin踩的坑
2019/11/15 Python
Django异步任务线程池实现原理
2019/12/17 Python
Python continue语句实例用法
2020/02/06 Python
使用python matplotlib 画图导入到word中如何保证分辨率
2020/04/16 Python
女儿十岁生日答谢词
2014/01/27 职场文书
2015年幼儿园元旦亲子活动方案
2014/12/09 职场文书
《悬崖边的树》读后感2篇
2019/12/02 职场文书