Vue實(shí)現(xiàn)簡(jiǎn)單分頁(yè)器

更新時(shí)間：2018年12月29日 10:23:35 作者：_夏爾

這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單分頁(yè)器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

提前說(shuō)明：這原本是一個(gè)Jquery分頁(yè)器，因?yàn)楣卷?xiàng)目前后端不分離，以前的分頁(yè)用的是基于.net的分頁(yè)器。后來(lái)我引入了jquery分頁(yè)器，在我掌握Vue之后,又自己寫了一些基于Vue的插件（為什么不用成熟的Vue插件庫(kù)，還是因?yàn)榍昂蠖藳](méi)分離）但是前后端相對(duì)最開始的混雜已經(jīng)算是分得很開了。

分頁(yè)器的樣式是bootstrap風(fēng)格的，是一個(gè)完全自定義樣式的分頁(yè)器，這意味著你可以很輕松把它改成你想要的樣子(例子效果圖如下)。

所有的分頁(yè)器DEMO，都不會(huì)太簡(jiǎn)單，所以想要真正的掌握（支配）一款好用的分頁(yè)插件，請(qǐng)務(wù)必耐心看下面的使用示例代碼（本demo的下載地址，點(diǎn)擊可以作為項(xiàng)目直接打開使用），另外也寫了詳細(xì)的注釋并盡可能的保證簡(jiǎn)單好用。
引用bootstrap(如果你希望是bootstrap風(fēng)格)
或者你完全可以自己寫自己想要的風(fēng)格！因?yàn)榉猪?yè)器的html結(jié)構(gòu)是js生成的。
需要引用的腳本文件有(資源均在文章底部下載包里)。

按如下順序引入：

1.jQuery
2.Vue
3.jgPaginator.js

貼代碼，看注釋：

<!DOCTYPE html>
<html>

 <head>
  <meta charset="UTF-8">
  <title>分頁(yè)組件</title>
  <link rel="stylesheet" href="../../css/bootstrap.min.css" >

  <style>
   html,
   body {
    width: 100%;
    height: 100%;
   }

   .page-container {
    width: 1200px;
    border: 1px solid #000;
    margin: 50px auto 0 auto;
    overflow: hidden;
   }

   .page-content{
    margin: 50px 0;
   }

   /*jqPaginator分頁(yè)控件樣式*/ 
   .hiddenPager {
    visibility: hidden;
   }

   .jqPager {
    position: relative;
    width: 100%;
    height: 40px;
    padding: 25px 0;
    background-color: #FFF;
   }

   .jqPager .pagination {
    float: initial;
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
   }

   .jqPager .pagination li {
    display: inline-block;
   }

   .jqPager .pagination li a {
    padding: 4px 10px;
   }

   /*跳頁(yè)--選用功能*/
   .jumpBox {
    position: absolute;
    top: 0;
    right: 105px;
   }

   .jumppage {
    display: block;
    width: 42px;
    padding-left: 8px;
    float: left;
    height: 34px;
    outline: none;
   }

   .jumpbtn {
    float: left;
    display: block;
    height: 34px;
    line-height: 34px;
    margin-left: 5px;
   }
  </style>

 </head>

 <body>

  <div id="app" class="page-container">
   <!--頁(yè)面該顯示的內(nèi)容-->
   <div class="page-content text-center">{{nova.text}}</div>

   <!--分頁(yè)-->
   <div class="jqPager" v-bind:class="{hiddenPager:hiddenPager}">
    <ul id="jqPager" class="pagination cf"></ul>
    <!--沒(méi)有跳頁(yè)功能可以不要下面的jumpBox-->
    <div class="jumpBox">
     <input type="number" class="jumppage" id="jumpPageIndex" />
     <a href="javascript:;" rel="external nofollow" class="jumpbtn" v-on:click="pageSkip()">跳轉(zhuǎn)</a>
    </div>
   </div>

  </div>

 </body>
 <script src="jquery-2.1.4.min.js"></script>
 <script src="vue.js"></script>
 <script src="jqPaginator.js"></script>
 <script>
  //虛擬的數(shù)據(jù)來(lái)源
  var dataSource = [{
    "text": "第一頁(yè)數(shù)據(jù)，應(yīng)該是一個(gè)數(shù)組，包含了pageSize條數(shù)據(jù)"
   }, {
    "text": "第二頁(yè)數(shù)據(jù)"
   }, {
    "text": "第三頁(yè)數(shù)據(jù)"
   },
   {
    "text": "第四頁(yè)數(shù)據(jù)"
   },
   {
    "text": "第五頁(yè)數(shù)據(jù)"
   },
   {
    "text": "第六頁(yè)數(shù)據(jù)"
   }
  ]

  //模擬后臺(tái)返回的數(shù)據(jù)
  var backData = {
   Data: dataSource,//返回的數(shù)據(jù)
   totlaCount: 6,//搜索結(jié)果總數(shù)
   Success: true//請(qǐng)求接口是否成功
  };

  /*每一頁(yè)顯示的數(shù)據(jù)條數(shù)，按照約定傳給后臺(tái)，此例為1。
  需要加以說(shuō)明的是這個(gè)實(shí)例你是看不出來(lái)這個(gè)參數(shù)的作用的，正如我返回?cái)?shù)據(jù)中說(shuō)的那樣，后臺(tái)給你返回的數(shù)據(jù)條數(shù)
  應(yīng)該是一個(gè)有 -pagesize-條數(shù)據(jù)的數(shù)組才對(duì)*/
  var jqPageSize = 1; 

  var app = new Vue({
   el: "#app",
   data: {
    //query是查詢條件，這里就是當(dāng)前頁(yè)碼和每一頁(yè)該顯示的數(shù)據(jù)條數(shù)
    query: {
     pageIndex: 1,
     pageSize: jqPageSize
    },
    nova: [],
    hiddenPager: true,//是否顯示分頁(yè)
    totalCount: 0,//數(shù)據(jù)總條數(shù)，后臺(tái)返回
   },
   methods: {
    //初始化分頁(yè),通過(guò)更改生成的html結(jié)構(gòu)（給其添加class或者改變返回的DOM）可以手動(dòng)配置頁(yè)器的顯示效果。
    initPager: function() {
     $('#jqPager').jqPaginator({
      visiblePages: 1,
      currentPage: 1,
      totalPages: 1,
      first: '<li id="first"><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首頁(yè)</a></li>',
      prev: '<li id="prev"><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >上一頁(yè) </a></li>',
      next: '<li id="next"><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >下一頁(yè)</a></li>',
      last: '<li id="last"><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >尾頁(yè)</a></li>',
      page: '<li class="page"><a href="javascript:void(0);" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >{{page}}</a></li>',
     });
    },

    //獲取數(shù)據(jù)并根據(jù)結(jié)果配置分頁(yè)
    getData: function() {
     this.nova = backData.Data[this.query.pageIndex - 1];     
     this.totalCount = backData.Data.length;
     this.hiddenPager = false;

     //核心配置在此部，根據(jù)后臺(tái)返回?cái)?shù)據(jù)控制分頁(yè)器該如何顯示
     //想要完全掌握這個(gè)分頁(yè)器，你可以研究下jgPaginator.js源碼，很容易修改。
     $('#jqPager').jqPaginator('option', {
      totalCounts: app.totalCount,//后臺(tái)返回?cái)?shù)據(jù)總數(shù)
      pageSize: jqPageSize, //每一頁(yè)顯示多少條內(nèi)容
      currentPage: app.query.pageIndex, //現(xiàn)在的頁(yè)碼
      visiblePages: 4, //最多顯示幾頁(yè)

      //翻頁(yè)時(shí)觸發(fā)的事件
      onPageChange: function(num) {
       //app.query.pageIndex = num;
       app.pageChangeEvent(num);//調(diào)用翻頁(yè)事件
      }
     });
    }，
    //翻頁(yè)或者跳頁(yè)事件
    pageChangeEvent: function(pageIndex) {
     this.query.pageIndex = Number(pageIndex);
     this.getData();
    },

    //跳頁(yè)-選用功能，可有可無(wú)
    pageSkip: function() {  
     var maxPage = 1;//默認(rèn)可以跳的最大頁(yè)碼     
     var targetPage = document.getElementById("jumpPageIndex").value;//目的頁(yè)面     
     if(!targetPage) {
      alert("請(qǐng)輸入頁(yè)碼");
      return;
     }

     //計(jì)算最大可跳頁(yè)數(shù)
     maxPage = Math.floor(this.totalCount / this.query.pageSize);     
     if(maxPage<1){
      maxPage=1;
     }

     if(targetPage > maxPage) {
      alert('超過(guò)最大頁(yè)數(shù)了，當(dāng)前最大頁(yè)數(shù)是' + maxPage);
      return;
     }
     this.pageChangeEvent(targetPage);
    },   
   },
   //這一部分的定時(shí)器是為了此例方便加上的，初始化分頁(yè)方法（initPager）要在獲取數(shù)據(jù)之前執(zhí)行就可以了
   mounted: function() {
    this.initPager();

    setTimeout(function() {
     app.getData();
    }, 50)
   }

  });
 </script>

</html>

以上就是分頁(yè)的全部實(shí)現(xiàn)代碼，想要完全掌握，只看DEMO肯定是不夠的，所以這里是DEMO的下載地址，里面包含了所有需要引用的資源文件以及未壓縮的分頁(yè)器核心：jqPaginator.js。你需要好好看看它的源碼！

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: