基于vue.js实现简单的pagination(分页)功能

前言

最近开始学一些新东西，因此没啥时间总结，今天做了一些小东西，总结一下自己现阶段写的基于vue.js的分页。

正文

首先背景是需要在展示页加一个分页，后台分页我用的是另外一个插件，然而这个展示页撑死就几十条数据，而且自己也得去实现积累一些组件，因此就动手自己写了一个。

首先说明一下,vue.js似乎更新到1.0版本了，因为原来项目是基于0.12版本的，我也没看新特性是什么。不过应该是向下兼容的吧=-=

对于最基础的分页我们再熟悉不过，功能主要为以下几点:

1.基本的按钮跳转，比如第二页就显示第二页数据
2.支持自定义划分页数，per of page。
3.支持上一页 下一页功能。

组件懒得自己画，然而又不想直接加载bootstrap整个文件。因此直接去扒bootstrap分页组件的样式。 如下：

.pagination {
    display: inline-block;
    padding-left: 0;
    margin: 20px 0;
    border-radius: 4px;
}
.pagination>li {
    display: inline;
}
.pagination>li:first-child>a, .pagination>li:first-child>span {
    margin-left: 0;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
}
.pagination>li>a:hover{
  background-color: #EAE8E8;
  cursor: pointer;
}
.pagination>li>a, .pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 12px;
    margin-left: -1px;
    line-height: 1.42857143;
    color: #337ab7;
    text-decoration: none;
    background-color: #fff;
    border: 1px solid #ddd;
}
.pagination>li:last-child>a, .pagination>li:last-child>span {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
}
.paginationactive{
  background-color: #EAE8E8!important;
}
.pagi{
  width: 100%;
  text-align: center;
}

因为扒下来是没有active状态的，因此自己写个类强制覆盖原先的就行了。

先来看基本Html

     <table  v-repeat="lists">
       <tr>
         <td></td>
         <td></td>
         <td></td>
         <td v-show="progress == '未完成' || progress != '已完成'">未完成</td>
         <td v-show="progress == '已完成'">已完成</td>
        </tr>
     </table>

因为之前显示是用v-repeat直接循环了，因此如果用别的插件还需要自己手写动态append内容，因此需要基于该v-repeat来考虑如何分页。

本来想直接用vue-grid这个插件，但是发现那么长的代码一大部分功能并不需要，因此只粗略看了一下整个源码就放弃使用外载vue-grid这个想法。

直接把最基础的分页组件放在一个包裹内，以后想在哪用直接可以扩展。

 <div class="pagi">
     <ul class="pagination">
          <li>
            <a aria-label="Previous" v-on="click:prev()" >
              <span aria-hidden="true">«</span>
            </a>
          </li>
          <li v-repeat="fullpagenum"><a v-on="click:jump($index)" v-class="paginationactive:checkcurrent($index)">1</a></li>
          <li>
            <a aria-label="Next" v-on="click:next()">
              <span aria-hidden="true">»</span>
            </a>
          </li>
     </ul>
   </div>

大概思路就是先在created生命周期时去获取所有数据A传给$fulldata，然后把数据的长度除以想要分页的数传给$fullpagenum,然后写一个获取指定范围内容函数来裁剪得到数据B，把数据B传给$lists。然后不用管别的vue会自动帮你把剩下的工作完成。

因此具体代码如下:

data:function () {
    return {
      lists: "",
      fulldata:"",
      fullpagenum:"",
      perofpage:6,
      currentper:0
    }
  },
  methods: {
    fetch: function() {
      var that = this;
      var lists = [];
      $.ajax({
            type: "GET",
            url: that.url,
            dataType: "json",
          //  async:false,//为了把数据赋值给上个作用域，需要同步进行
            success: function(data) {
           //  console.log(data);
             that.lists = data.content; 
             that.fulldata = data.content;
             that.fullpagenum = Math.ceil( data.content.length / that.perofpage);
             that.getPartData(0,that.perofpage - 1);
           //  localStorage.Cachemarquee = JSON.stringify(data); 
            },
            error: function(jqXHR){
               console.log("发生错误：" + jqXHR.status);
            }
        });
     },
     getPartData:function(start,end){
       var that = this;
       var fulldata = that.fulldata;
       var temp = [];
       if(end > that.fulldata.length - 1){
        end = that.fulldata.length - 1;
       }
       for (var i = start ; i <= end ; i++) {
         temp.push(fulldata[i]);
       };
       that.lists = temp;
     },
     jump:function(num){
       this.getPartData(num * this.perofpage,num * this.perofpage + this.perofpage -1);
       this.currentper = num;
     },
     prev:function(){
      //先判断是否越界
      var current = this.currentper;
      var last = current - 1;
      //console.log(last);
      if(last < 0){
        last = 0;//如果越界了就直接赋值为0
      } 
      this.currentper = last;
      this.jump(last);
     },
     next:function(){
      //先判断是否越界
      var current = this.currentper;
      var next = current + 1;
     // console.log(next);
      if(next > this.fullpagenum - 1){
        next = this.fullpagenum - 1;//如果越界了就直接赋值为0
      } 
      this.currentper = next;
      this.jump(next);
     },
     checkcurrent:function(num){
       console.log(num == this.currentper);
       return num == this.currentper; //点击哪个就给哪个添加active状态
     }
  },
  created:function(){ 
    this.fetch();
    console.log(this.fulldata);
  },
  ready:function(){ 
    console.log("test");
    this.getPartData();

  },

如果想要添加功能可以直接往里面扩展。

今天就到这-0-

Table of Contents