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为返回的数据数，也是一个数组对象

# Node.js  # Bootstrap-table  # 分页  # nodeJS与MySQL实现分页数据以及倒序数据  # Vue+Node实现商品列表的分页、排序、筛选  # 添加购物车功能详解  # NodeJs操作MongoDB教程之分页功能以及常见问题  # nodejs mysql 实现分页的方法  # nodejs个人博客开发第六步 数据分页  # node.js基于mongodb的搜索分页示例  # NodeJS和BootStrap分页效果的实现代码  # nodejs分页类代码分享  # node+express实现分页效果  # 用户列表  # 条数  # 后端  # 设置为  # 是一个  # 文档  # 放在  # 是有  # 还能  # 之处  # 两种  # 所需  # 就可  # 要比  # 仅是  # 重写  # 不适合  # 不仅如此  # 自带 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 微信小程序制作网站有哪些,微信小程序需要做网站吗？  简历没回改：利用AI润色让你的文字更专业  Laravel如何记录自定义日志？（Log频道配置）  Laravel怎么多语言本地化设置_Laravel语言包翻译与Locale动态切换【手册】  香港服务器WordPress建站指南：SEO优化与高效部署策略  Laravel怎么实现搜索功能_Laravel使用Eloquent实现模糊查询与多条件搜索【实例】  如何在橙子建站中快速调整背景颜色？  iOS发送验证码倒计时应用  香港服务器如何优化才能显著提升网站加载速度？  制作电商网页,电商供应链怎么做？  重庆市网站制作公司,重庆招聘网站哪个好？  移动端手机网站制作软件,掌上时代，移动端网站的谷歌SEO该如何做？  Laravel中Service Container是做什么的_Laravel服务容器与依赖注入核心概念解析  如何在 Python 中将列表项按字母顺序编号（a.、b.、c. …）  瓜子二手车官方网站在线入口 瓜子二手车网页版官网通道入口  Laravel路由怎么定义_Laravel核心路由系统完全入门指南  如何用西部建站助手快速创建专业网站？  javascript基本数据类型及类型检测常用方法小结  个人网站制作流程图片大全,个人网站如何注销？  Google浏览器为什么这么卡 Google浏览器提速优化设置步骤【方法】  如何在沈阳梯子盘古建站优化SEO排名与功能模块？  Laravel Pest测试框架怎么用_从PHPUnit转向Pest的Laravel测试教程  Laravel API资源类怎么用_Laravel API Resource数据转换  如何在香港服务器上快速搭建免备案网站？  C++用Dijkstra(迪杰斯特拉)算法求最短路径  为什么php本地部署后css不生效_静态资源加载失败修复技巧【技巧】  Win11摄像头无法使用怎么办_Win11相机隐私权限开启教程【详解】  IOS倒计时设置UIButton标题title的抖动问题  如何在IIS中新建站点并配置端口与物理路径？  laravel怎么用DB facade执行原生SQL查询_laravel DB facade原生SQL执行方法  如何批量查询域名的建站时间记录？  在线ppt制作网站有哪些软件,如何把网页的内容做成ppt？  如何在云指建站中生成FTP站点？  Laravel Facade的原理是什么_深入理解Laravel门面及其工作机制  Thinkphp 中 distinct 的用法解析  如何在Windows环境下新建FTP站点并设置权限？  Laravel如何配置任务调度？（Cron Job示例）  如何在服务器上三步完成建站并提升流量？  如何在万网主机上快速搭建网站？  Laravel如何与Vue.js集成_Laravel + Vue前后端分离项目搭建指南  C#如何调用原生C++ COM对象详解  Laravel怎么上传文件_Laravel图片上传及存储配置  如何快速搭建虚拟主机网站？新手必看指南  魔毅自助建站系统：模板定制与SEO优化一键生成指南  WordPress 子目录安装中正确处理脚本路径的完整指南  如何基于PHP生成高效IDC网络公司建站源码？  Laravel项目结构怎么组织_大型Laravel应用的最佳目录结构实践  如何在景安服务器上快速搭建个人网站？  Laravel怎么实现支付功能_Laravel集成支付宝微信支付  html5如何实现懒加载图片_ intersectionobserver api用法【教程】