前端开发必备：Jquery动态分页，轻松实现本地分页

2022-11-07 10:40:39

利用 jQuery 实现动态分页：提升网页性能和用户体验

随着网站变得越来越复杂，内容也随之激增。这给用户带来了浏览海量信息的挑战，也对网站的性能提出了严峻考验。动态分页技术应运而生，它允许按需加载数据，从而优化网页性能和用户体验。本文将深入探讨如何使用 jQuery 实现动态分页，让你的网站如虎添翼。

何为动态分页？

动态分页是一种按需加载数据的技术，与传统的一次性加载所有数据不同。它将数据集分割成较小的页面，并在用户滚动或单击页面时动态加载这些页面。这种方法显著改善了网页加载速度，尤其是在处理大数据集时。

使用 jQuery 实现动态分页

jQuery 是一个轻量级的 JavaScript 库，可简化动态分页的实现。以下步骤将指导你使用 jQuery 创建一个动态分页系统：

function Paging(element, options) {
  this.element = element;
  this.options = {
    pageNum: options.pageNum || 1,
    totalNum: options.totalNum,
    totalList: options.totalList,
    pageRows: options.pageRows,
  };
  this.init();
}

Paging.prototype.init = function() {
  var that = this;
  this.createDom();
  this.bindEvent();
  this.render(this.options.pageNum);
};

Paging.prototype.createDom = function() {
  var that = this;
  var html =
    '<div class="page-box"><ul class="pagination"></ul><span class="page-total">共<i class="total-num"></i>条</span></div>';
  this.element.html(html);
  this.pagination = this.element.find('.pagination');
  this.totalNum = this.element.find('.total-num');
};

Paging.prototype.bindEvent = function() {
  var that = this;
  this.pagination.on('click', 'li', function() {
    var index = $(this).index() + 1;
    that.render(index);
  });
};

Paging.prototype.render = function(index) {
  var that = this;
  var pageNum = index || this.options.pageNum;
  var totalPageNum = Math.ceil(this.options.totalNum / this.options.pageRows);
  this.pagination.empty();
  var prevHtml = '<li class="page-prev"><a href="javascript:;">&laquo;</a></li>';
  var nextHtml = '<li class="page-next"><a href="javascript:;">&raquo;</a></li>';
  if (pageNum === 1) {
    prevHtml = '<li class="page-prev page-disabled"><a href="javascript:;">&laquo;</a></li>';
  }
  if (pageNum === totalPageNum) {
    nextHtml = '<li class="page-next page-disabled"><a href="javascript:;">&raquo;</a></li>';
  }
  this.pagination.append(prevHtml);
  var start = pageNum - 2 > 0 ? pageNum - 2 : 1;
  var end = pageNum + 2 < totalPageNum ? pageNum + 2 : totalPageNum;
  for (var i = start; i <= end; i++) {
    var liHtml = '<li class="page-item ' + (i === pageNum ? 'active' : '') + '"><a href="javascript:;">' + i + '</a></li>';
    this.pagination.append(liHtml);
  }
  this.pagination.append(nextHtml);
  this.totalNum.text(this.options.totalNum);
};