Node.js中Bootstrap-table的两种分页的实现方法


Posted in Javascript onSeptember 18, 2017

1、Bootstrap-table使用

github:https://github.com/wenzhixin/bootstrap-table
官方文档:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
bootstrap-table是一个基于bootstrap的表格插件,在使用上有点类似于easyui中的datagrid,但是样式上要比easyui美观一些,而且更加符合现代网站或者系统的前端要求。

不仅如此,bootstrap-table在使用中还有诸多独特之处:

自带前端搜索功能,还能定制搜索
前端列表详情展示,不仅仅是表格的形式
分页更加自由、更加多样化。可以根据不同的需求选择不同的分页方式。
bootstrap-table的使用通过查看官方文档就可掌握,现在主要记录bootstrap-table中独特的、强大的分页功能。

注意: 文中后台逻辑使用Node.js实现,数据库为mongodb

2、bootstrap-table中两种分页

bootstrap-table的分页方式是有bootstrap-table中sidePagination属性决定,此属性有两个值,client,server,分别代表前端分页和服务器后端分页。默认值为client 前端分页。

首先在页面中引入必须的插件包,如下:

<link rel="stylesheet" href="bootstrap.min.css" rel="external nofollow" >
<link rel="stylesheet" href="bootstrap-table.css" rel="external nofollow" >

<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script src="bootstrap-table.js"></script>
<-- 本地化js -->
<script src="bootstrap-table-zh-CN.js"></script>

2.1 前端分页

前端页面代码如下:

$("#gridList").bootstrapTable({ 
      url:'/user/getUserList',//url获取数据 
      method:'get',//方法 
      cache:false,//缓存 
      pagination:true,//分页 
      sidePagination:'client',//指定在前端客户端分页 
      pageNumber:1,//页号 
      pageSize:10,//页面数据条数 
      pageList:[10,20,30,40,50],//分页列表 
      uniqueId:'_id',//唯一id 
      toolbar:'#toolbar',//工具栏 
      showColumns:true,//显示选择列 
      showRefresh:true,//显示刷新按钮 
      showToggle:true,//显示切换视图:列表和详情视图切换 
      search:true,//显示搜索框 
      columns:[ 
        {checkbox:true}, 
        {field:'user_no',title:'用户编码',width:'10%'}, 
        {field:'user_name',title:'用户姓名',width:'20%' 
        }, 
        {field:'user_sex',title:'用户性别',width:'8%',align:'center', 
          formatter:function(value,row,index){ 
            if(value == '1'){ 
              return '男'; 
            }else{ 
              return '女'; 
            } 
          }}, 
        {field:'user_account',title:'登录账号',width:'10%'}, 
        {field:'user_role',title:'所属角色',width:'10%'}, 
        {field:'user_sys',title:'所属系统',width:'10%'}, 
        {field:'create_time',title:'创建时间',width:'20%', 
          formatter:function(value,row,index){ 
            return dateTimeFormatter(value,'yyyy-MM-dd hh:mm:ss'); 
          } 
        } 
      ] 
    });

注意: 在前端页面分页中,sidePagination 必须设置为client

部分后台逻辑代码如下:

/******user_route.js*********/
/**
 * 获取用户列表
 */
router.get('/getUserList',function(req,res){
  userServices.getUserList(req,res,function(err,users){
    if(err){
      res.send({success:false,msg:err,data:null});
    }else{
      res.send({'success':true,'msg':"获取用户列表成功",'total':users.length,'data':users});
    }
  });
});

/*******user_services.js********/
/**
 * 获取用户列表
 * @param req
 * @param res
 * @param callback
 */
exports.getUserList = function(req,res,callback){
  userModel.$user.find(function(err,users){
    if(err){
      callback('获取用户列表失败!',null);
    }else{
      callback(null,users);
    }
  })
}

注意: 返回到前端的数据中,必须有 data 参数,bootstrap-table会根据返回的data参数,设置前端分页。data参数值须为一个数组,数组中包含返回的数据。

前端分页在数据较少的时候非常适用,可以减少浏览器请求数,数据库访问此数,从而提高系统性能。但是不适合非常庞大的万级数据量,返回的数据会放在内存中保存,庞大的数据量会消耗不少内存。

2.2 后端分页

前端页面js:

$("#gridList").bootstrapTable({
      url:'/user/getUserListPagination',//设置后台分页,必须设置URL获取数据,或是重写ajax方法
      method:'get',
      cache:false,
      pagination:true,
      sidePagination:'server',//设置为后台服务器分页
      pageNumber:1,
      pageSize:10,
      pageList:[10,20,30,40,50],
      queryParamsType:'',//请求参数类型,默认为`limit`,使用默认值不会向后台出入分页所需的页号,页数据数等必须值,所以需要设置为空串
      queryParams:function(params){//向后台传输参数。params为bootstrap-table的options.
        var param = {
          page:params.pageNumber,//获取页号
          size:params.pageSize//获取页面数据量大小
        }
        return param;
      },
      uniqueId:'_id',
      toolbar:'#toolbar',
      showColumns:true,
      showRefresh:true,
      showToggle:true,
      search:true,
      columns:[
        {checkbox:true},
        {field:'user_no',title:'用户编码',width:'10%'},
        {field:'user_name',title:'用户姓名',width:'20%'
        },
        {field:'user_sex',title:'用户性别',width:'8%',align:'center',
          formatter:function(value,row,index){
            if(value == '1'){
              return '男';
            }else{
              return '女';
            }
          }},
        {field:'user_account',title:'登录账号',width:'10%'},
        {field:'user_role',title:'所属角色',width:'10%'},
        {field:'user_sys',title:'所属系统',width:'10%'},
        {field:'create_time',title:'创建时间',width:'20%',
          formatter:function(value,row,index){
            return dateTimeFormatter(value,'yyyy-MM-dd hh:mm:ss');
          }
        }
      ]
    });

注意: 代码中注释不分为在后台分页中所必须设置的
后端逻辑代码:

/********user_route.js*******/
/**
 * 后台分页获取数据列表
 */
router.get('/getUserListPagination',function(req,res){
  var queryParams = req.query;
  var params= {
    page:queryParams.page,
    size:queryParams.size
  };
  userServices.getUserListPagination(params,function(err,users){//根据分页条件查询数据条数
    if(err){
      res.send({success:false,msg:err,data:null});
    }else{
      userServices.getUserList(req,res,function(err,allUsers){//查询所有数据总条数
        if(err){
          res.send({success:false,msg:err,data:null});
        }else{
          res.send({'success':true,'msg':"获取用户列表成功",'total':allUsers.length,'rows':users});
        }
      });
    }
  });
});

/**********user_services.js********/
/**
 * 分页查询
 * @param params
 * @param callback
 */
exports.getUserListPagination = function(params,callback){

  var index = (params.page-1)*params.size;//设置分页起点下标
  var size = parseInt(params.size);
  //设置分页条件
  var query = userModel.$user.find({});
  query.limit(size);//条数
  query.skip(index);//下标

  //执行查询
  query.exec(function(err,users){
    callback(err,users);
  });
}

注意: 选择后台分页,返回到前台的数据必须包含 total rows 两个参数,total为数据总数;rows为返回的数据数,也是一个数组对象

Javascript 相关文章推荐
一个很简单的办法实现TD的加亮效果.
Jun 29 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
Nov 03 Javascript
JavaSript中变量的作用域闭包的深入理解
May 12 Javascript
自编jQuery插件实现模拟alert和confirm
Sep 01 Javascript
JS 面向对象之继承---多种组合继承详解
Jul 10 Javascript
纯js实现手风琴效果代码
Apr 17 Javascript
详解自动生成博客目录案例
Dec 09 Javascript
使用Xcache缓存器加速PHP网站的配置方法
Apr 22 Javascript
20行js代码实现的贪吃蛇小游戏
Jun 20 Javascript
Node.JS循环删除非空文件夹及子目录下的所有文件
Mar 12 Javascript
详解React项目的服务端渲染改造(koa2+webpack3.11)
Mar 19 Javascript
vue中beforeRouteLeave实现页面回退不刷新的示例代码
Nov 01 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
Sep 18 #Javascript
Node.JS 循环递归复制文件夹目录及其子文件夹下的所有文件
Sep 18 #Javascript
为什么我们要做三份 Webpack 配置文件
Sep 18 #Javascript
分析javascript中9 个常见错误阻碍你进步
Sep 18 #Javascript
十个免费的web前端开发工具详细整理
Sep 18 #Javascript
Redux 和 Mobx的选择问题:让你不再困惑!
Sep 18 #Javascript
HTML5开发Kinect体感游戏的实例应用
Sep 18 #Javascript
You might like
PHP字符串函数系列之nl2br(),在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
PHP 通过Socket收发十六进制数据的实现代码
2013/08/16 PHP
CodeIgniter配置之database.php用法实例分析
2016/01/20 PHP
php无法连接mysql数据库的正确解决方法
2016/07/01 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
在html页面中包含共享页面的方法
2008/10/24 Javascript
有关js的变量作用域和this指针的讨论
2010/12/16 Javascript
js日期联动示例
2014/05/02 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
Js为表单动态添加节点内容的方法
2015/02/10 Javascript
vue2.0 和 animate.css的结合使用
2017/12/12 Javascript
使用JQuery自动完成插件Auto Complete详解
2019/06/18 jQuery
小程序实现日历左右滑动效果
2019/10/21 Javascript
Antd的table组件表格的序号自增操作
2020/10/27 Javascript
[47:43]完美世界DOTA2联赛PWL S3 Magama vs GXR 第二场 12.19
2020/12/24 DOTA
python中enumerate的用法实例解析
2014/08/18 Python
python如何实现excel数据添加到mongodb
2015/07/30 Python
实例Python处理XML文件的方法
2015/08/31 Python
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
Python实现简易端口扫描器代码实例
2017/03/15 Python
python3连接MySQL数据库实例详解
2018/05/24 Python
快速解决pandas.read_csv()乱码的问题
2018/06/15 Python
Python将list元素转存为CSV文件的实现
2020/11/16 Python
python使用dlib进行人脸检测和关键点的示例
2020/12/05 Python
泰坦健身器材:Titan Fitness
2018/02/13 全球购物
C++面试题:关于链表和指针
2013/06/05 面试题
C#公司笔试题
2014/03/28 面试题
大学校园毕业自我鉴定
2014/01/15 职场文书
交通事故检查书范文
2014/01/30 职场文书
大学校园活动策划书
2014/02/04 职场文书
大学生求职信例文
2014/06/29 职场文书
领导干部四风问题自我剖析材料
2014/09/25 职场文书
离婚协议书怎样才有法律效力
2014/10/10 职场文书
司法局群众路线教育实践活动开展情况总结
2014/10/25 职场文书
2014年大学生村官工作总结
2014/11/19 职场文书
TensorFlow的自动求导原理分析
2021/05/26 Python