基于jquery封装的一个js分页

下面是基于jQuery封装的一个JS分页的攻略，包含以下几个步骤：

1. 目录结构

一般来说，我们需要在项目中新建一个js文件夹，然后在这个文件夹下新建一个名为paging.js的文件。

2. HTML页面

在需要分页的页面中，我们需要设置一个DOM元素作为容器，用于渲染分页条。例如，我们可以在页面底部放置一个ID为“pagination”的DIV元素。然后我们需要引入jQuery文件和我们刚才创建的paging.js文件。

<!-- 引入jQuery -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

<!-- 引入paging.js文件 -->
<script src="js/paging.js"></script>

<!-- 分页容器 -->
<div id="pagination"></div>

3. JS代码

在paging.js文件中，我们需要定义一个名为paging的函数，用于生成分页按钮。这个函数需要接受三个参数：

• pageIndex：当前页码
• pageSize：每页数据条数
• total：总数据条数

函数内部的代码逻辑如下：

function paging(pageIndex, pageSize, total) {
  var pageCount = Math.ceil(total / pageSize); // 计算总页数
  var startPage = pageIndex > 3 ? pageIndex - 2 : 1; // 计算开始页码
  var strHtml = ""; // 分页按钮HTML

  // 上一页按钮
  if (pageIndex > 1) {
    strHtml +=
      '<a href="javascript:;" class="prev" data-index="' +
      (pageIndex - 1) +
      '">上一页</a>';
  }

  // 中间数字按钮
  for (var i = startPage; i <= pageCount && i <= startPage + 4; i++) {
    strHtml +=
      '<a href="javascript:;" class="' +
      (i == pageIndex ? "active" : "") +
      '" data-index="' +
      i +
      '">' +
      i +
      "</a>";
  }

  // 下一页按钮
  if (pageIndex < pageCount) {
    strHtml +=
      '<a href="javascript:;" class="next" data-index="' +
      (pageIndex + 1) +
      '">下一页</a>';
  }

  // 赋值给分页容器
  $("#pagination").html(strHtml);
}

4. 分页功能实现

在页面初始化的时候，我们需要调用paging函数，并传入当前页码、每页数据条数以及总数据条数。例如：

$(function() {
  // 假设当前为第一页，每页显示10条数据，总共100条数据
  paging(1, 10, 100);
});

用户每次点击分页按钮时，我们需要更新当前页码，并重新调用paging函数。例如：

// 分页按钮点击事件
$(document).on("click", "#pagination a", function() {
  var pageIndex = $(this).data("index"); // 获取页码

  // 更新当前页码，并重新调用paging函数
  paging(pageIndex, 10, 100);
});

5. 示例

下面是两个实际使用这个分页插件的示例：

示例1：后台管理系统

假设我们正在开发一个后台管理系统，需要对用户列表进行分页展示。我们可以使用以下方式调用paging函数：

$(function() {
  // 当前为第一页，每页显示10条数据，总共1000条数据
  paging(1, 10, 1000);
});

$(document).on("click", "#pagination a", function() {
  var pageIndex = $(this).data("index"); // 获取页码

  // 在这里发送ajax请求，获取对应页码的用户列表，并将其展示在页面上

  // 然后更新当前页码，并重新调用paging函数
  paging(pageIndex, 10, 1000);
});

示例2：商品列表页面

假设我们正在开发一个电商网站，需要对商品列表进行分页展示。我们可以使用以下方式调用paging函数：

$(function() {
  // 当前为第一页，每页显示20条商品，总共200条商品
  paging(1, 20, 200);
});

$(document).on("click", "#pagination a", function() {
  var pageIndex = $(this).data("index"); // 获取页码

  // 在这里发送ajax请求，获取对应页码的商品列表，并将其展示在页面上

  // 然后更新当前页码，并重新调用paging函数
  paging(pageIndex, 20, 200);
});

注意，这里的ajax请求需要根据后端具体实现进行编写，这里只是示例，并不具有真实性。