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'); } } ] });
新闻热点
疑难解答
图片精选