亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Node.js中Bootstrap-table的兩種分頁的實(shí)現(xiàn)方法

 更新時(shí)間:2017年09月18日 22:38:49   投稿:mdxy-dxy  
這篇文章主要介紹了Node.js中Bootstrap-table的兩種分頁的使用方法,需要的朋友可以參考下

1、Bootstrap-table使用

github:https://github.com/wenzhixin/bootstrap-table
官方文檔:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/
bootstrap-table是一個(gè)基于bootstrap的表格插件,在使用上有點(diǎn)類似于easyui中的datagrid,但是樣式上要比easyui美觀一些,而且更加符合現(xiàn)代網(wǎng)站或者系統(tǒng)的前端要求。

不僅如此,bootstrap-table在使用中還有諸多獨(dú)特之處:

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

注意: 文中后臺(tái)邏輯使用Node.js實(shí)現(xiàn),數(shù)據(jù)庫為mongodb

2、bootstrap-table中兩種分頁

bootstrap-table的分頁方式是有bootstrap-table中sidePagination屬性決定,此屬性有兩個(gè)值,client,server,分別代表前端分頁和服務(wù)器后端分頁。默認(rèn)值為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,//頁號(hào) 
      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:'登錄賬號(hào)',width:'10%'}, 
        {field:'user_role',title:'所屬角色',width:'10%'}, 
        {field:'user_sys',title:'所屬系統(tǒng)',width:'10%'}, 
        {field:'create_time',title:'創(chuàng)建時(shí)間',width:'20%', 
          formatter:function(value,row,index){ 
            return dateTimeFormatter(value,'yyyy-MM-dd hh:mm:ss'); 
          } 
        } 
      ] 
    }); 

注意: 在前端頁面分頁中,sidePagination 必須設(shè)置為client

部分后臺(tái)邏輯代碼如下:

/******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會(huì)根據(jù)返回的data參數(shù),設(shè)置前端分頁。data參數(shù)值須為一個(gè)數(shù)組,數(shù)組中包含返回的數(shù)據(jù)。

前端分頁在數(shù)據(jù)較少的時(shí)候非常適用,可以減少瀏覽器請(qǐng)求數(shù),數(shù)據(jù)庫訪問此數(shù),從而提高系統(tǒng)性能。但是不適合非常龐大的萬級(jí)數(shù)據(jù)量,返回的數(shù)據(jù)會(huì)放在內(nèi)存中保存,龐大的數(shù)據(jù)量會(huì)消耗不少內(nèi)存。

2.2 后端分頁

前端頁面js:

$("#gridList").bootstrapTable({
      url:'/user/getUserListPagination',//設(shè)置后臺(tái)分頁,必須設(shè)置URL獲取數(shù)據(jù),或是重寫ajax方法
      method:'get',
      cache:false,
      pagination:true,
      sidePagination:'server',//設(shè)置為后臺(tái)服務(wù)器分頁
      pageNumber:1,
      pageSize:10,
      pageList:[10,20,30,40,50],
      queryParamsType:'',//請(qǐng)求參數(shù)類型,默認(rèn)為`limit`,使用默認(rèn)值不會(huì)向后臺(tái)出入分頁所需的頁號(hào),頁數(shù)據(jù)數(shù)等必須值,所以需要設(shè)置為空串
      queryParams:function(params){//向后臺(tái)傳輸參數(shù)。params為bootstrap-table的options.
        var param = {
          page:params.pageNumber,//獲取頁號(hào)
          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:'登錄賬號(hào)',width:'10%'},
        {field:'user_role',title:'所屬角色',width:'10%'},
        {field:'user_sys',title:'所屬系統(tǒng)',width:'10%'},
        {field:'create_time',title:'創(chuàng)建時(shí)間',width:'20%',
          formatter:function(value,row,index){
            return dateTimeFormatter(value,'yyyy-MM-dd hh:mm:ss');
          }
        }
      ]
    });

注意: 代碼中注釋不分為在后臺(tái)分頁中所必須設(shè)置的
后端邏輯代碼:

/********user_route.js*******/
/**
 * 后臺(tái)分頁獲取數(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;//設(shè)置分頁起點(diǎn)下標(biāo)
  var size = parseInt(params.size);
  //設(shè)置分頁條件
  var query = userModel.$user.find({});
  query.limit(size);//條數(shù)
  query.skip(index);//下標(biāo)

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

注意: 選擇后臺(tái)分頁,返回到前臺(tái)的數(shù)據(jù)必須包含 total rows 兩個(gè)參數(shù),total為數(shù)據(jù)總數(shù);rows為返回的數(shù)據(jù)數(shù),也是一個(gè)數(shù)組對(duì)象

相關(guān)文章

  • Nodejs使用express 編寫接口的實(shí)現(xiàn)

    Nodejs使用express 編寫接口的實(shí)現(xiàn)

    express是一個(gè)第三方模塊,支持豐富的api,本文主要介紹了Nodejs使用express 編寫接口的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2024-06-06
  • node.js實(shí)現(xiàn)身份認(rèn)證的示例代碼

    node.js實(shí)現(xiàn)身份認(rèn)證的示例代碼

    本文主要介紹了 node.js實(shí)現(xiàn)身份認(rèn)證的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2022-04-04
  • 一文教你如何使用Node進(jìn)程管理工具-pm2

    一文教你如何使用Node進(jìn)程管理工具-pm2

    這篇文章詳細(xì)介紹了如何使用node進(jìn)程管理工具pm2,文中代碼示例講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以借鑒一下
    2023-04-04
  • 如何利用node轉(zhuǎn)發(fā)請(qǐng)求詳解

    如何利用node轉(zhuǎn)發(fā)請(qǐng)求詳解

    這篇文章主要給大家介紹了關(guān)于利用node轉(zhuǎn)發(fā)請(qǐng)求的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-09-09
  • 詳解nodejs 開發(fā)企業(yè)微信第三方應(yīng)用入門教程

    詳解nodejs 開發(fā)企業(yè)微信第三方應(yīng)用入門教程

    這篇文章主要介紹了詳解nodejs 開發(fā)企業(yè)微信第三方應(yīng)用入門教程,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2019-03-03
  • nodejs基礎(chǔ)之常用工具模塊util用法分析

    nodejs基礎(chǔ)之常用工具模塊util用法分析

    這篇文章主要介紹了nodejs基礎(chǔ)之常用工具模塊util用法,結(jié)合實(shí)例形式分析了nodejs核心工具模塊util功能、相關(guān)函數(shù)與使用方法,需要的朋友可以參考下
    2018-12-12
  • nodejs讀取本地mp3和mp4等媒體文件并播放的案例

    nodejs讀取本地mp3和mp4等媒體文件并播放的案例

    fs模塊是nodejs官方提供用來操作文件的模塊,下面這篇文章主要給大家介紹了關(guān)于nodejs讀取本地mp3和mp4等媒體文件并播放的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-09-09
  • nodejs 搭建簡易服務(wù)器的圖文教程(推薦)

    nodejs 搭建簡易服務(wù)器的圖文教程(推薦)

    下面小編就為大家?guī)硪黄猲odejs 搭建簡易服務(wù)器的圖文教程(推薦)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-07-07
  • 詳解Nodejs 部署到阿里云全過程

    詳解Nodejs 部署到阿里云全過程

    這篇文章主要介紹了詳解Nodejs 部署到阿里云全過程,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
    2017-06-06
  • 詳解在express站點(diǎn)中使用ejs模板引擎

    詳解在express站點(diǎn)中使用ejs模板引擎

    本篇文章主要介紹了在express站點(diǎn)中使用ejs模板引擎,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-09-09

最新評(píng)論