vue.js写的分页类和效果asp.net

站长苏飞

vue.js写的分页类和效果
先看看效果



JS插件

[JavaScript] 纯文本查看 复制代码

/**
 * 用于分页的JS文件，必须在引用vue.js文件后才可引入本文件
 * 编码人：苏飞
 * 编码时间：2019-01-21
 * */

//当前页
Vue.prototype.pageIndex = 0;
//总行数
Vue.prototype.totalcount = 0;
//每页行数
Vue.prototype.pageSize = 0;
//总页数
Vue.prototype.pageCount = 0;

//更新分页数据  总行数，每页行数，当前页
Vue.prototype.setpage = function (totalcount, pagesize, pageindex) {
    this.pageCount = Math.ceil(totalcount / pagesize);
    this.totalcount = totalcount;
    this.pageSize = pagesize;
    this.pageIndex = pageindex;
};

//清理分页数据
Vue.prototype.clear = function () {
    //当前页
    this.pageIndex = 0;
    //总行数
    this.totalcount = 0;
    //总页数
    this.pageCount = 0;
    //每页行数
    this.pageSize = 0;
};

//分页显示数量动态加载方法
Vue.prototype.indexs = function () {
    //开始页
    var left = 1;
    //结束页
    var right = this.pageCount;
    //在显示的页码数组
    var ar = [];
    if (this.pageCount >= 10) {
        if (this.pageIndex > 6 && this.pageIndex < this.pageCount - 4) {
            left = this.pageIndex - 5
            right = this.pageIndex + 4
        } else {
            if (this.pageIndex <= 6) {
                left = 1
                right = 10
            } else {
                right = this.pageCount
                left = this.pageCount - 8
            }
        }
    }
    while (left <= right) {
        ar.push(left)
        left++
    }
    return ar
};

在页面上直接设置两个参数就行了

[JavaScript] 纯文本查看 复制代码

  //设置分页的数据三个参数为：1总行数据，2每页多少行，3当前要显示的页码
                            rw.setpage(info.TotalCount, info.pageSize, info.pageIndex);

然后就是又增加了一个清空数据的方法

[JavaScript] 纯文本查看 复制代码

  //清理分页数据
        rw.clear();

最后大家看一下引用的控件

[HTML] 纯文本查看 复制代码

  <div class="pagination-wrap">
                                    <div class="count">
                                        <div>
                                            总页数 {{ pageCount}}    总记录数 {{ totalcount}}
                                        </div>
                                    </div>
                                    <ul class="pagination" v-if="pageCount > 1">
                                        <li v-if="pageIndex>1"><a class="acursor" href="javascripit:void(0)" v-on:click="getdata(1)">
                                            首页</a></li>
                                        <li v-if="pageIndex>1"><a class="acursor" v-on:click="pageIndex--,getdata(pageIndex)">
                                            上一页</a></li>
                                        <li v-for="n in indexs" v-bind:class="pageIndex === n ? 'cur':''"><a class="acursor"
                                            v-on:click="getdata(n)">{{ n }}</a> </li>
                                        <li v-if="pageIndex!=pageCount"><a class="acursor" v-on:click="pageIndex++,getdata(pageIndex)">
                                            下一页</a></li>
                                        <li v-if="pageIndex!=pageCount"><a class="acursor" v-on:click="getdata(pageCount)">
                                            尾页</a></li>
                                    </ul>
                                </div>

把以上代码做成一个控件，每个需要分页的页面直接调用 就行了。
只需要将绑定数据的方法修改一下即可

[JavaScript] 纯文本查看 复制代码

getdata(pageIndex)

范范

强烈支持楼主ing……

Amy

强烈支持楼主ing……

惜

激动人心，无法言表！

竹林风

我只是路过打酱油的。