Node.js中Bootstrap-table的兩種分頁的實現(xiàn)方法
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)代網(wǎng)站或者系統(tǒng)的前端要求。
不僅如此,bootstrap-table在使用中還有諸多獨特之處:
自帶前端搜索功能,還能定制搜索
前端列表詳情展示,不僅僅是表格的形式
分頁更加自由、更加多樣化。可以根據(jù)不同的需求選擇不同的分頁方式。
bootstrap-table的使用通過查看官方文檔就可掌握,現(xiàn)在主要記錄bootstrap-table中獨特的、強大的分頁功能。
注意: 文中后臺邏輯使用Node.js實現(xiàn),數(shù)據(jù)庫為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獲取數(shù)據(jù)
method:'get',//方法
cache:false,//緩存
pagination:true,//分頁
sidePagination:'client',//指定在前端客戶端分頁
pageNumber:1,//頁號
pageSize:10,//頁面數(shù)據(jù)條數(shù)
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');
}
}
]
});
注意: 在前端頁面分頁中,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);
}
})
}
注意: 返回到前端的數(shù)據(jù)中,必須有 data 參數(shù),bootstrap-table會根據(jù)返回的data參數(shù),設置前端分頁。data參數(shù)值須為一個數(shù)組,數(shù)組中包含返回的數(shù)據(jù)。
前端分頁在數(shù)據(jù)較少的時候非常適用,可以減少瀏覽器請求數(shù),數(shù)據(jù)庫訪問此數(shù),從而提高系統(tǒng)性能。但是不適合非常龐大的萬級數(shù)據(jù)量,返回的數(shù)據(jù)會放在內(nèi)存中保存,龐大的數(shù)據(jù)量會消耗不少內(nèi)存。
2.2 后端分頁
前端頁面js:
$("#gridList").bootstrapTable({
url:'/user/getUserListPagination',//設置后臺分頁,必須設置URL獲取數(shù)據(jù),或是重寫ajax方法
method:'get',
cache:false,
pagination:true,
sidePagination:'server',//設置為后臺服務器分頁
pageNumber:1,
pageSize:10,
pageList:[10,20,30,40,50],
queryParamsType:'',//請求參數(shù)類型,默認為`limit`,使用默認值不會向后臺出入分頁所需的頁號,頁數(shù)據(jù)數(shù)等必須值,所以需要設置為空串
queryParams:function(params){//向后臺傳輸參數(shù)。params為bootstrap-table的options.
var param = {
page:params.pageNumber,//獲取頁號
size:params.pageSize//獲取頁面數(shù)據(jù)量大小
}
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:'所屬系統(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');
}
}
]
});
注意: 代碼中注釋不分為在后臺分頁中所必須設置的
后端邏輯代碼:
/********user_route.js*******/
/**
* 后臺分頁獲取數(shù)據(jù)列表
*/
router.get('/getUserListPagination',function(req,res){
var queryParams = req.query;
var params= {
page:queryParams.page,
size:queryParams.size
};
userServices.getUserListPagination(params,function(err,users){//根據(jù)分頁條件查詢數(shù)據(jù)條數(shù)
if(err){
res.send({success:false,msg:err,data:null});
}else{
userServices.getUserList(req,res,function(err,allUsers){//查詢所有數(shù)據(jù)總條數(shù)
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);//條數(shù)
query.skip(index);//下標
//執(zhí)行查詢
query.exec(function(err,users){
callback(err,users);
});
}
注意: 選擇后臺分頁,返回到前臺的數(shù)據(jù)必須包含 total rows 兩個參數(shù),total為數(shù)據(jù)總數(shù);rows為返回的數(shù)據(jù)數(shù),也是一個數(shù)組對象
相關(guān)文章
詳解nodejs 開發(fā)企業(yè)微信第三方應用入門教程
這篇文章主要介紹了詳解nodejs 開發(fā)企業(yè)微信第三方應用入門教程,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-03-03

