Node.js中Bootstrap-table的两种分页的实现方法
1、Bootstrap-table使用
github:https://github./wenzhixin/bootstrap-table
官方文档http://bootstrap-table.wenzhixin../zh-/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_aount',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({suess:false,msg:err,data:null}); }else{ res.send({'suess':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_aount',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({suess:false,msg:err,data:null}); }else{ userServices.getUserList(req,res,function(err,allUsers){//查询所有数据总条数 if(err){ res.send({suess:false,msg:err,data:null}); }else{ res.send({'suess':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为返回的数据数,也是一个数组对象
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程