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 相关文章推荐
JS 实现获取打开一个界面中输入的值
Mar 19 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
Aug 14 Javascript
javascript去除字符串左右两端的空格
Feb 05 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
Aug 11 Javascript
理解JavaScript事件对象
Jan 25 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
Feb 25 Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 Javascript
漂亮! js实现颜色渐变效果
Aug 12 Javascript
JavaScript编写一个简易购物车功能
Sep 17 Javascript
js实现二级菜单点击显示当前内容效果
Apr 28 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 Javascript
jquery获取img的src值实例介绍
Jan 16 jQuery
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中几种常见的超时处理全面总结
2012/09/11 PHP
解析PHP无限级分类方法及代码
2013/06/21 PHP
超级兔子让浮动层消失的前因后果
2007/03/09 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
2010/11/14 Javascript
jQuery学习笔记[1] jQuery中的DOM操作
2010/12/03 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
2011/04/19 Javascript
javascript 实现字符串反转的三种方法
2013/11/23 Javascript
浅析JavaScript中的delete运算符
2013/11/30 Javascript
javascript中递归函数用法注意点
2015/07/30 Javascript
JavaScript必知必会(十) call apply bind的用法说明
2016/06/08 Javascript
js无法获取到html标签的属性的解决方法
2016/07/26 Javascript
使用JS实现图片展示瀑布流效果的实例代码
2016/09/12 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
基于Layer+jQuery的自定义弹框
2020/05/26 Javascript
jQuery验证表单格式的使用方法
2017/01/10 Javascript
vue2.0中vue-cli实现全选、单选计算总价格的实例代码
2017/07/18 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
2017/09/03 Javascript
微信小程序倒计时功能实现代码
2017/11/09 Javascript
基于Node的Axure文件在线预览的实现代码
2019/08/28 Javascript
Js数组扁平化实现方法代码总汇
2020/11/11 Javascript
[00:10]DOTA2全国高校联赛 以DOTA2会友
2018/05/30 DOTA
django基础之数据库操作方法(详解)
2017/05/24 Python
python 从list中随机取值的方法
2020/11/16 Python
AmazeUI 模态窗口的实现代码
2020/08/18 HTML / CSS
澳大利亚在线家具店:Luxo Living
2019/03/24 全球购物
Tomcat Mysql datasource数据源配置
2015/12/28 面试题
我有一个梦想演讲稿
2014/05/05 职场文书
求职信范文大全
2014/05/26 职场文书
升职自荐信怎么写
2015/03/05 职场文书
2015纪念九一八事变84周年演讲稿
2015/03/19 职场文书
教师思想工作总结2015
2015/05/13 职场文书
社区党务工作总结2015
2015/05/19 职场文书
围城读书笔记
2015/06/26 职场文书
比赛口号霸气押韵
2015/12/24 职场文书
Python基础之数据结构详解
2021/04/28 Python
MySQL的安装与配置详细教程
2021/06/26 MySQL