Node.js中Bootstrap-table如何實現分頁

這篇文章給大家分享的是有關Node.js中Bootstrap-table如何實現分頁的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

1、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'); 
          } 
        } 
      ] 
    });

注意： 在前端頁面分頁中，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);
    }
  })
}

注意： 返回到前端的數據中，必須有 data 參數，bootstrap-table會根據返回的data參數，設置前端分頁。data參數值須為一個數組，數組中包含返回的數據。

前端分頁在數據較少的時候非常適用，可以減少瀏覽器請求數，數據庫訪問此數，從而提高系統性能。但是不適合非常龐大的萬級數據量，返回的數據會放在內存中保存，龐大的數據量會消耗不少內存。

2.2 后端分頁

前端頁面js:

$("#gridList").bootstrapTable({
      url:'/user/getUserListPagination',//設置后臺分頁，必須設置URL獲取數據，或是重寫ajax方法
      method:'get',
      cache:false,
      pagination:true,
      sidePagination:'server',//設置為后臺服務器分頁
      pageNumber:1,
      pageSize:10,
      pageList:[10,20,30,40,50],
      queryParamsType:'',//請求參數類型，默認為`limit`，使用默認值不會向后臺出入分頁所需的頁號，頁數據數等必須值，所以需要設置為空串
      queryParams:function(params){//向后臺傳輸參數。params為bootstrap-table的options.
        var param = {
          page:params.pageNumber,//獲取頁號
          size:params.pageSize//獲取頁面數據量大小
        }
        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:'所屬系統',width:'10%'},
        {field:'create_time',title:'創建時間',width:'20%',
          formatter:function(value,row,index){
            return dateTimeFormatter(value,'yyyy-MM-dd hh:mm:ss');
          }
        }
      ]
    });

注意： 代碼中注釋不分為在后臺分頁中所必須設置的
后端邏輯代碼：

/********user_route.js*******/
/**
 * 后臺分頁獲取數據列表
 */
router.get('/getUserListPagination',function(req,res){
  var queryParams = req.query;
  var params= {
    page:queryParams.page,
    size:queryParams.size
  };
  userServices.getUserListPagination(params,function(err,users){//根據分頁條件查詢數據條數
    if(err){
      res.send({success:false,msg:err,data:null});
    }else{
      userServices.getUserList(req,res,function(err,allUsers){//查詢所有數據總條數
        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);//條數
  query.skip(index);//下標

  //執行查詢
  query.exec(function(err,users){
    callback(err,users);
  });
}

注意： 選擇后臺分頁，返回到前臺的數據必須包含 total rows 兩個參數，total為數據總數；rows為返回的數據數，也是一個數組對象

感謝各位的閱讀！關于“Node.js中Bootstrap-table如何實現分頁”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！