1. Use of Bootstrap-table
github:/wenzhixin/bootstrap-table
Official document: /zh-cn/documentation/
bootstrap-table is a bootstrap-based table plug-in. It is somewhat similar to the datagrid in easyyui, but the style is more beautiful than easyyui, and it is more in line with the front-end requirements of modern websites or systems.
Not only that, bootstrap-table has many unique features in use:
It comes with front-end search function, and can also customize searches
The front-end list details are displayed, not just in the form of tables
Pagination is more free and more diverse. You can choose different paging methods according to different needs.
The use of bootstrap-table can be mastered by viewing the official documents. Now it mainly records the unique and powerful paging functions in bootstrap-table.
Note: The background logic is implemented in the article, and the database is mongodb
2. Two types of paging in bootstrap-table
The pagination method of bootstrap-table is determined by the sidePagination property in bootstrap-table. This property has two values, client and server, representing front-end pagination and server back-end pagination respectively. The default value is client front-end pagination.
First, introduce the necessary plug-in packages into the page, as follows:
<link rel="stylesheet" href="" rel="external nofollow" > <link rel="stylesheet" href="" rel="external nofollow" > <script src=""></script> <script src=""></script> <script src=""></script> <-- Localizationjs --> <script src=""></script>
2.1 Front-end pagination
The front-end page code is as follows:
$("#gridList").bootstrapTable({
url:'/user/getUserList',//url gets data method:'get',//method cache:false,//cache pagination:true,//Pagination sidePagination:'client',//Specify paging on the front-end client pageNumber:1,//Page number pageSize:10,//Number of page data pageList:[10,20,30,40,50],//Pagination list uniqueId:'_id',//The only id toolbar:'#toolbar',//Toolbar showColumns:true,//Show the selection column showRefresh:true,//Show refresh button showToggle:true,//Show switch view: List and Detail view switch search:true,//Show the search box columns:[
{checkbox:true},
{field:'user_no',title:'User encoding',width:'10%'},
{field:'user_name',title:'User name',width:'20%'
},
{field:'user_sex',title:'User Gender',width:'8%',align:'center',
formatter:function(value,row,index){
if(value == '1'){
return 'male';
}else{
return 'female';
}
}},
{field:'user_account',title:'Login account',width:'10%'},
{field:'user_role',title:'Role',width:'10%'},
{field:'user_sys',title:'System',width:'10%'},
{field:'create_time',title:'Create time',width:'20%',
formatter:function(value,row,index){
return dateTimeFormatter(value,'yyyy-MM-dd hh:mm:ss');
}
}
]
});
Note: In front-end page pagination, sidePagination must be set to client
Some background logic codes are as follows:
/******user_route.js*********/
/**
* Get the user list
*/
('/getUserList',function(req,res){
(req,res,function(err,users){
if(err){
({success:false,msg:err,data:null});
}else{
({'success':true,'msg':"Get user list successful",'total':,'data':users});
}
});
});
/*******user_services.js********/
/**
* Get the user list
* @param req
* @param res
* @param callback
*/
= function(req,res,callback){
userModel.$(function(err,users){
if(err){
callback('Failed to get user list! ',null);
}else{
callback(null,users);
}
})
}
Note: When returning to the front-end data, there must be data parameters. Bootstrap-table will set the front-end pagination based on the returned data parameters. The data parameter value must be an array, which contains the returned data.
Front-end paging is very suitable when there is less data. It can reduce the number of browser requests and database access this number, thereby improving system performance. However, it is not suitable for a very large amount of data of ten thousand. The returned data will be stored in memory, and the huge amount of data will consume a lot of memory.
2.2 Backend pagination
Front-end page js:
$("#gridList").bootstrapTable({
url:'/user/getUserListPagination',// Set up background pagination, you must set the URL to get data, or rewrite the ajax method method:'get',
cache:false,
pagination:true,
sidePagination:'server',//Set as background server paging pageNumber:1,
pageSize:10,
pageList:[10,20,30,40,50],
queryParamsType:'',//Request parameter type, default is `limit`. Use default value to not enter and exit the page number required for paging to the background, the number of page data, etc., so it needs to be set to an empty string queryParams:function(params){//Transfer parameters to the background. params are options for bootstrap-table. var param = {
page:,//Get page number size://Get the page data size }
return param;
},
uniqueId:'_id',
toolbar:'#toolbar',
showColumns:true,
showRefresh:true,
showToggle:true,
search:true,
columns:[
{checkbox:true},
{field:'user_no',title:'User encoding',width:'10%'},
{field:'user_name',title:'User name',width:'20%'
},
{field:'user_sex',title:'User Gender',width:'8%',align:'center',
formatter:function(value,row,index){
if(value == '1'){
return 'male';
}else{
return 'female';
}
}},
{field:'user_account',title:'Login account',width:'10%'},
{field:'user_role',title:'Role',width:'10%'},
{field:'user_sys',title:'System',width:'10%'},
{field:'create_time',title:'Create time',width:'20%',
formatter:function(value,row,index){
return dateTimeFormatter(value,'yyyy-MM-dd hh:mm:ss');
}
}
]
});
Note: The comments in the code are not divided into those that must be set in the background pagination.
Backend logic code:
/********user_route.js*******/
/**
* Backend paging to get data list
*/
('/getUserListPagination',function(req,res){
var queryParams = ;
var params= {
page:,
size:
};
(params,function(err,users){//Query the number of data according to the paging conditions if(err){
({success:false,msg:err,data:null});
}else{
(req,res,function(err,allUsers){//Query the total number of all data if(err){
({success:false,msg:err,data:null});
}else{
({'success':true,'msg':"Get user list successful",'total':,'rows':users});
}
});
}
});
});
/**********user_services.js********/
/**
* Pagination query
* @param params
* @param callback
*/
= function(params,callback){
var index = (-1)*;//Set the paging starting point subscript var size = parseInt();
//Set the paging conditions var query = userModel.$({});
(size);//Number of items (index);//Subscript
//Execute query (function(err,users){
callback(err,users);
});
}
Note: When selecting the background paging, the data returned to the foreground must contain two parameters: total rows, total is the total number of data; rows is the returned number of data, which is also an array object