js 分页 (仅包含数据，使用vue生成界面)

[Lenny-Hu]

分页工具代码

/*
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-08-28 13:01:38
 * @LastEditTime: 2019-09-30 13:46:23
 * @LastEditors: Please set LastEditors
 */
// 分页工具，仅返回页码数据，不包含html
;(function (global) {
  var factory = function () {
    function Pagination (options) {
      var _options = options || {};
      this.options = {
        max: 5, // 最多显示的页码数量
        size: 10, // 每页的数量
        showPrevAndNext: true, // 显示上一页和下一页
        showFirstAndLast: true, // 显示首页和尾页
        showPageNumber: true, // 显示数字页码
        nextText: '下一页', // 上下页文字
        prevText: '上一页'
      };
      this.options = $.extend(this.options, _options);

      this.res = []; // 页码结果数组
      this.pageCount = 0; // 总页数
      this.page = 1; // 当前页
      this.count = 0; // 总数量
      this.front = parseInt(this.options.max / 2); // 前面显示的页码
      this.rear = this.options.max - this.front - 1; // 后面显示的页码

      // 上一页和下一页结果数组
      this.prevRes = [];
      this.nextRes = [];
    }

    // 处理上一页和下一页
    Pagination.prototype.prevAndNext = function () {
      if (this.options.showPrevAndNext) {
        if (this.page > 1) {
          this.prevRes = [{
            text: this.options.prevText,
            index: this.page - 1
          }];
        }

        if (this.pageCount > 1 && this.page != this.pageCount) {
          this.nextRes = [{
            text: this.options.nextText,
            index: this.page + 1
          }];
        }
      }
    }

    // 首页和尾页
    Pagination.prototype.firstAndLast = function () {
      if (this.options.showFirstAndLast) {
        // 添加首页
        if (this.page - this.front > 1) {
          this.res.unshift({
            text: 1,
            index: 1
          });

          // 首页后面的...
          if (this.page >= this.options.max) {
            this.res.splice(1, 0,
              {
                text: '...',
                index: this.page - this.front
              }
            );
          }
        }

        // 添加尾页
        var len = this.res.length;
        if (this.page + this.rear < this.pageCount) {
          this.res.push({
            text: this.pageCount,
            index: this.pageCount
          });

          // 尾页后面的...
          if (this.page + this.rear + 1 != this.pageCount) {
            this.res.splice(len, 0,
              {
                text: '...',
                index: this.page + this.rear
              }
            );
          }
        }
      }
    }

    // 中间的页码
    Pagination.prototype.pageNumber = function () {
      if (this.options.showPageNumber) {
        var start = (this.page - this.front) <= 0 ? 1 : this.page - this.front;
        var end = (this.page + this.rear) > this.pageCount ? this.pageCount : this.page + this.rear;

        for (var index = start; index <= end; index++) {
          this.res.push({
            text: index,
            index: index,
            active: this.page == index
          });
        }
      }
    }

    Pagination.prototype.create = function (page, count) {
      this.res = [];
      this.prevRes = [];
      this.nextRes = [];
      this.page = +page;
      this.count = +count;
      this.pageCount = Math.ceil(this.count / this.options.size); // 总页数

      this.prevAndNext(); // 上一页和下一页
      this.pageNumber(); // 中间的页码
      this.firstAndLast(); // 首页和尾页

      return [].concat(this.prevRes, this.res, this.nextRes);
    }

    return Pagination;
  }

  if (typeof module !=='undefined' && typeof exports === 'object') {
    module.exports = factory();
  } else if (typeof define === 'function' && (define.cmd || define.amd)) {
    define(factory);
  } else {
    global.Pagination = factory();
  }

})(typeof window !== 'undefined' ? window : global);

配合vue使用

// js
computed: {
        paginationList: function () {
          return this.pagination.create(this.page, this.count);
        }
      }

this.pagination = new Pagination({ size: this.size, showPrevAndNext: false, showFirstAndLast: false, showPageNumber: true });

// html
<div class="pagination-box f-tac">
          <ul class="f-cb f-ib">
            <li class="f-fl" v-for="(item, index) in paginationList" :class="{'active': item.active}" :key="index">
              <a href="javascript:;" @click="onPaginationChanged(item)">{{item.text}}</a>
            </li>
          </ul>
        </div>