首页 > 语言 > JavaScript > 正文

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

2024-05-06 15:26:31
字体:
来源:转载
供稿:网友

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');           }         }       ]     });             
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表

图片精选