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美觀一些，而且更加符合現(xiàn)代網站或者系統(tǒng)的前端要求。

不僅如此，bootstrap-table在使用中還有諸多獨特之處：

自帶前端搜索功能，還能定制搜索
前端列表詳情展示，不僅僅是表格的形式
分頁更加自由、更加多樣化。可以根據不同的需求選擇不同的分頁方式。
bootstrap-table的使用通過查看官方文檔就可掌握，現(xiàn)在主要記錄bootstrap-table中獨特的、強大的分頁功能。

注意： 文中后臺邏輯使用Node.js實現(xiàn)，數據庫為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:'所屬系統(tǒng)',width:'10%'},         {field:'create_time',title:'創(chuàng)建時間',width:'20%',           formatter:function(value,row,index){             return dateTimeFormatter(value,'yyyy-MM-dd hh:mm:ss');           }         }       ]     });