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 相关文章推荐
json 实例详细说明教程
Oct 31 Javascript
jQuery实现移动 和 渐变特效的点击事件
Feb 26 Javascript
JavaScript实现同时调用多个函数的方法
Nov 09 Javascript
关于JS中setTimeout()无法调用带参函数问题的解决方法
Jun 21 Javascript
flexslider.js实现移动端轮播
Feb 05 Javascript
浅谈原生JS实现jQuery的animate()动画示例
Mar 08 Javascript
Angular.js中定时器循环的3种方法总结
Apr 27 Javascript
D3.js进阶系列之CSV表格文件的读取详解
Jun 06 Javascript
Angular如何引入第三方库的方法详解
Jul 13 Javascript
JavaScript中的return布尔值的用法和原理解析
Aug 14 Javascript
用vue快速开发app的脚手架工具
Jun 11 Javascript
简单聊聊TypeScript只读修饰符
Apr 06 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
天津市收音机工业发展史
2021/03/04 无线电
php利用iframe实现无刷新文件上传功能的代码
2011/09/29 PHP
ThinkPHP的I方法使用详解
2014/06/18 PHP
ThinkPHP路由详解
2015/07/27 PHP
PHP会话处理的10个函数
2015/08/11 PHP
php 流程控制switch的简单实例
2016/06/07 PHP
php 基础函数
2017/02/10 PHP
Javascript中Eval函数的使用说明
2008/10/11 Javascript
Jquery实战_读书笔记2 选择器
2010/01/22 Javascript
jquery checkbox,radio是否选中的判断代码
2010/03/20 Javascript
js文件缓存之版本管理详解
2013/07/05 Javascript
JS 有趣的eval优化输入验证实例代码
2013/09/22 Javascript
JS调用页面表格导出excel示例代码
2014/03/18 Javascript
jQuery实现在textarea指定位置插入字符或表情的方法
2015/03/11 Javascript
JavaScript与jQuery实现的闪烁输入效果
2016/02/18 Javascript
jquery表单验证插件formValidator使用方法
2016/04/01 Javascript
基于bootstrap的选择框插件icheck
2016/12/23 Javascript
jQuery设置图片等比例缩小的方法
2017/04/29 jQuery
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
nodejs实现连接mongodb数据库的方法示例
2018/03/15 NodeJs
angular4中*ngFor不能对返回来的对象进行循环的解决方法
2018/09/12 Javascript
ES6 Proxy实现Vue的变化检测问题
2019/06/11 Javascript
微信小程序与公众号实现数据互通的方法
2019/07/25 Javascript
angular8.5集成TinyMce5的使用和详细配置(推荐)
2020/11/16 Javascript
vue使用vant中的checkbox实现全选功能
2020/11/17 Vue.js
[03:52]显微镜下的DOTA2第三期——英雄在无聊的时候干什么
2014/06/20 DOTA
Python守护线程用法实例
2017/06/23 Python
Python中循环后使用list.append()数据被覆盖问题的解决
2018/07/01 Python
解决Python内层for循环如何break出外层的循环的问题
2019/06/24 Python
Python SSL证书验证问题解决方案
2020/01/13 Python
自定义实现 PyQt5 下拉复选框 ComboCheckBox的完整代码
2020/03/30 Python
python 解决函数返回return的问题
2020/12/05 Python
党政领导班子四风问题对照检查材料思想汇报
2014/10/02 职场文书
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server
企业开发CSS命名BEM代码规范实践
2022/02/12 HTML / CSS
Appium中scroll和drag_and_drop根据元素位置滑动
2022/02/15 Python