vue 簡單的分頁功能實現一

前端的分頁功能其實是對數據的分頁處理，主要是在js中實現對數據的分頁處理，這里分享兩種簡單的寫法，以供參考。兩種方法都是用vue來實現的。

首先，相關的參數都一樣，在vue里的data中定義好，如下所示：

var vm = new Vue({
    el:'#app',
    data:{
        listArray:[
          {
              'name':'趙*',
              'age':'21',
              'edu':'本科',
              'phone':'188****888888',
              'school':'河南農業大學'
          },
          {
              'name':'錢*',
              'age':'22',
              'edu':'本科',
              'phone':'188****888888',
              'school':'鄭州大學'
          },
          {
              'name':'王*',
              'age':'23',
              'edu':'大專',
              'phone':'188****888888',
              'school':'河南工業大學'
          },
          {
              'name':'張*',
              'age':'25',
              'edu':'本科',
              'phone':'188****888888',
              'school':'河南農業大學'
          },
          {
              'name':'劉*',
              'age':'21',
              'edu':'本科',
              'phone':'188****888888',
              'school':'河南理工大學'
          }
        ],
        // 總頁數
        pageNum:1,
        // 每頁顯示的個數
        pageSize:2,
        // 當前頁
        currentPage:0,
        // 總數據
        totalPage:[],
        // 當前顯示的數據
        dataShow:[]
    }
})

第一種方法，將數據listArray按照每頁顯示的個數進行分組，放入totalPage中，然后展示時根據currentPage從totalPage中取值，賦給dataShow，進行展示。

分組：

created: function(){
      var vm = this;
      // 總頁數
      vm.pageNum = Math.ceil(vm.listArray.length / vm.pageSize) || 1 ;
      // 分組
      for (var i = 0; i<vm.pageNum; i++) {
          vm.totalPage[i] = vm.listArray.slice(vm.pageSize * i, vm.pageSize * (i + 1))
      }
      // 取值
      vm.dataShow = vm.totalPage[vm.currentPage];
    }

左右按鈕和頁碼的點擊事件也是一個取值的過程：

methods: {
        nextPage: function(){
            var vm = this;
            if (vm.currentPage == vm.pageNum - 1) return;
            vm.dataShow = vm.totalPage[++vm.currentPage]   
        },
        prePage: function(){
            var vm = this;
            if (vm.currentPage == 0) return;
            vm.dataShow = vm.totalPage[--vm.currentPage]
        },
        toPage: function(page){
            var vm = this;
            vm.currentPage = page
            vm.dataShow = vm.totalPage[vm.currentPage];
        }
    }

前端頁面代碼：

<table>
                        <tr>
                            <th>姓名</th>
                            <th>年齡</th>
                            <th>學歷</th>
                            <th>電話</th>
                            <th>畢業院校</th>
                        </tr>
                        <tr v-for="(item, index) in dataShow" :class="{ 'alt': index%2==1 }">
                            <td>{{ item.name }}</td>
                            <td>{{ item.age }}</td>
                            <td>{{ item.edu }}</td>
                            <td>{{ item.phone }}</td>
                            <td>{{ item.school }}</td>
                        </tr>
                    </table>
                    <div class="page">
                        <ul>
                            <li>
                                <a href="#"  v-on:click="prePage">
                                    <</a>
                            </li>
                            <li v-for="(item, index) in totalPage">
                                <a href="#" v-on:click="toPage(index)" :class="{active: currentPage==index}">{{ index+1 }}</a>
                            </li>
                            <li>
                                <a href="#" v-on:click="nextPage">></a>
                            </li>
                        </ul>
                    </div>

最終的效果：