纯jQuery实现前端分页功能

下面是“纯jQuery实现前端分页功能”的攻略：

1.准备工作

首先，需要在网站中引入jQuery，可以使用CDN或者下载jQuery文件引入。

<!-- 使用CDN引入jQuery -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

2.获取数据

前端分页的数据需要先通过AJAX请求获取，接口返回的数据需要是一个包含所有数据的数组。

// AJAX请求获取数据
$.ajax({
  url: 'http://example.com/api/data',
  success: function (response) {
    // response是接口返回的数据
    var dataList = response.data;
    // 对获取的数据进行处理
    // ...
  }
});

3.分页处理

分页处理需要根据获取到的数据和每页展示的数量来计算出总页数。然后可以通过循环遍历来生成分页的DOM元素，最后渲染到页面中。

// 每页展示的数量
var pageSize = 10;
// 总数据量
var total = dataList.length;
// 总页数
var totalPages = Math.ceil(total / pageSize);

// 分页展示
for (var i = 1; i <= totalPages; i++) {
  $('<li></li>').text(i).appendTo('.pagination');
}

上面的代码生成了分页的DOM元素，并将其添加到类名为.pagination的DOM元素中。

4.数据展示

数据展示需要根据当前页数和每页展示的数量来获取对应的数据，并将其展示到页面中。这个过程可以使用.slice()方法来实现。

// 当前页数
var currentPage = 1;
// 获取当前页对应的数据
var startIndex = (currentPage - 1) * pageSize;
var endIndex = startIndex + pageSize;
var pageData = dataList.slice(startIndex, endIndex);

// 数据展示
for (var i = 0; i < pageData.length; i++) {
  var item = $('<div></div>').text(pageData[i].title);
  item.appendTo('.data-list');
}

上面的代码获取了当前页对应的数据，并将其渲染到类名为.data-list的DOM元素中。

示例说明

下面是两个示例说明：

示例一：静态页面的前端分页

对于一些静态页面来说，如果数据不是很多，并且没有后端接口的调用，可以考虑通过前端分页的方式来实现数据的展示。

示例代码如下：

<div class="data-list"></div>

<ul class="pagination"></ul>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
  // 静态数据
  var dataList = [
    {title: '数据1'},
    {title: '数据2'},
    // ...
  ];

  // 每页展示的数量
  var pageSize = 5;
  // 总数据量
  var total = dataList.length;
  // 总页数
  var totalPages = Math.ceil(total / pageSize);
  // 当前页数
  var currentPage = 1;

  // 分页展示
  for (var i = 1; i <= totalPages; i++) {
    $('<li></li>').text(i).appendTo('.pagination');
  }

  // 数据展示
  function renderData() {
    // 获取当前页对应的数据
    var startIndex = (currentPage - 1) * pageSize;
    var endIndex = startIndex + pageSize;
    var pageData = dataList.slice(startIndex, endIndex);

    // 渲染数据
    $('.data-list').empty();
    for (var i = 0; i < pageData.length; i++) {
      var item = $('<div></div>').text(pageData[i].title);
      item.appendTo('.data-list');
    }
  }

  // 绑定分页点击事件
  $('.pagination').on('click', 'li', function () {
    currentPage = parseInt($(this).text());
    renderData();
    // 切换页码样式
    $(this).addClass('active').siblings().removeClass('active');
  });

  // 初始时渲染数据
  renderData();
  // 初始时高亮第一页
  $('.pagination li:first-child').addClass('active');
</script>

上面的代码在一个静态页面中实现了前端分页的效果。

示例二：AJAX动态获取数据的前端分页

对于需要展示大量数据的网站，可以通过调用后端接口来获取数据，并通过前端分页的方式来展示数据。