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>

最终的效果：

vue 简单的分页功能实现一

推荐阅读