沃梦达 / IT编程 / 前端开发 / 正文

原生JS分页展示效果（点击分页看效果）

前端开发
2024-01-17

下面是“原生JS分页展示效果”的完整攻略。

下面是“原生JS分页展示效果”的完整攻略。

前言

在实际项目开发中，通常都需要使用分页功能。常用的分页库有jQuery的pagination.js，但如果不想依赖jQuery，则可以使用原生JS实现分页。本篇文章将介绍如何使用原生JS实现分页展示效果。

实现步骤

第一步：创建分页HTML结构

首先，需要创建一个包含分页按钮的HTML结构。例如：

<div class="pagination">
  <a href="#">上一页</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">下一页</a>
</div>

其中，“上一页”和“下一页”按钮的class可以分别设置为prev和next，方便后面的JS实现。

第二步：获取分页数据

获取分页数据的方式有很多种，这里以AJAX获取JSON数据为例。假设我们已经成功获取到了一个包含20条数据的JSON数组。

第三步：按照每页的数据条数，划分总页数

假设每页显示5条数据，则总页数为4（20条数据 ÷ 5条每页）。在JS中，可以使用Math.ceil()函数对总页数进行向上取整。

var itemsPerPage = 5;
var totalPage = Math.ceil(data.length / itemsPerPage);

第四步：根据当前页数，渲染对应的数据

假设当前页码为1，则需要渲染第1页的数据，即数组下标0~4的数据。

var currentPage = 1;
var start = (currentPage - 1) * itemsPerPage;
var end = start + itemsPerPage;
var currentData = data.slice(start, end);

第五步：动态渲染分页按钮

根据总页数，动态生成分页按钮。这里可以使用for循环遍历生成。

var pagination = document.querySelector('.pagination');
pagination.innerHTML = '';

var prevLink = "<a href='#' class='prev'>上一页</a>";
var nextLink = "<a href='#' class='next'>下一页</a>";

pagination.innerHTML += prevLink;

for (var i = 1; i <= totalPage; i++) {
  var button = "<a href='#'>" + i + "</a>";
  pagination.innerHTML += button;
}

pagination.innerHTML += nextLink;

第六步：绑定点击事件，实现分页功能

给分页按钮绑定点击事件，并在点击事件中，根据当前点击的按钮，计算出当前页码，然后重新渲染对应页码的数据。

pagination.addEventListener('click', function(e) {
  e.preventDefault();
  var link = e.target;

  if (link.classList.contains('prev') && currentPage > 1) {
    currentPage--;
  } else if (link.classList.contains('next') && currentPage < totalPage) {
    currentPage++;
  } else if (link.tagName === 'A') {
    currentPage = parseInt(link.innerText);
  } else {
    return;
  }

  start = (currentPage - 1) * itemsPerPage;
  end = start + itemsPerPage;
  currentData = data.slice(start, end);

  renderData();
  renderPagination();
});

第七步：渲染数据和分页按钮

根据当前页码和每页数据条数渲染对应页码的数据和分页按钮。这里可以封装两个函数，分别进行数据和分页的渲染。

function renderData() {
  // 渲染数据的代码
}

function renderPagination() {
  // 渲染分页按钮的代码
}

示例说明1

下面是一个简单的示例。假设有一个包含20条数据的JSON数组，每页显示5条数据，现在需要使用原生JS实现分页展示效果。

<div class="pagination">
  <a href="#" class="prev">上一页</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#" class="next">下一页</a>
</div>

<ul class="data"></ul>

var itemsPerPage = 5;
var data = [
  {name: '张三', age: 18},
  {name: '李四', age: 20},
  {name: '王五', age: 22},
  {name: '赵六', age: 24},
  {name: '钱七', age: 26},
  {name: '孙八', age: 28},
  {name: '周九', age: 30},
  {name: '吴十', age: 32},
  {name: '郑十一', age: 34},
  {name: '韩十二', age: 36},
  {name: '刘十三', age: 38},
  {name: '朱十四', age: 40},
  {name: '陈十五', age: 42},
  {name: '杨十六', age: 44},
  {name: '胡十七', age: 46},
  {name: '林十八', age: 48},
  {name: '郭十九', age: 50},
  {name: '何二十', age: 52},
  {name: '吕二十一', age: 54}
];

var totalPage = Math.ceil(data.length / itemsPerPage);
var currentPage = 1;
var start = (currentPage - 1) * itemsPerPage;
var end = start + itemsPerPage;
var currentData = data.slice(start, end);

renderData();
renderPagination();

function renderData() {
  var list = document.querySelector('.data');
  list.innerHTML = '';

  currentData.forEach(function(item) {
    var li = document.createElement('li');
    li.innerText = item.name + '，' + item.age + '岁';
    list.appendChild(li);
  });
}

function renderPagination() {
  var pagination = document.querySelector('.pagination');
  pagination.innerHTML = '';

  var prevLink = "<a href='#' class='prev'>上一页</a>";
  var nextLink = "<a href='#' class='next'>下一页</a>";

  pagination.innerHTML += prevLink;

  for (var i = 1; i <= totalPage; i++) {
    var button = "<a href='#'>" + i + "</a>";
    pagination.innerHTML += button;
  }

  pagination.innerHTML += nextLink;
}

var pagination = document.querySelector('.pagination');
pagination.addEventListener('click', function(e) {
  e.preventDefault();
  var link = e.target;

  if (link.classList.contains('prev') && currentPage > 1) {
    currentPage--;
  } else if (link.classList.contains('next') && currentPage < totalPage) {
    currentPage++;
  } else if (link.tagName === 'A') {
    currentPage = parseInt(link.innerText);
  } else {
    return;
  }

  start = (currentPage - 1) * itemsPerPage;
  end = start + itemsPerPage;
  currentData = data.slice(start, end);

  renderData();
  renderPagination();
});

示例说明2

下面是一个稍微复杂一点的示例。假设需要获取一个包含1000条数据的JSON数组，每页显示10条数据，同时需要实现页面加载时自动显示第一页数据。

<div class="pagination">
  <a href="#" class="prev">上一页</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#" class="next">下一页</a>
</div>

<ul class="data"></ul>

var itemsPerPage = 10;
var data;

// AJAX获取JSON数据
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    data = JSON.parse(xhr.responseText);
    init();
  }
};
xhr.open('GET', 'data.json');
xhr.send();

function init() {
  var totalPage = Math.ceil(data.length / itemsPerPage);
  var currentPage = 1;
  var start = (currentPage - 1) * itemsPerPage;
  var end = start + itemsPerPage;
  var currentData = data.slice(start, end);

  renderData();
  renderPagination();

  function renderData() {
    var list = document.querySelector('.data');
    list.innerHTML = '';

    currentData.forEach(function(item) {
      var li = document.createElement('li');
      li.innerText = item.name + '，' + item.age + '岁';
      list.appendChild(li);
    });
  }

  function renderPagination() {
    var pagination = document.querySelector('.pagination');
    pagination.innerHTML = '';

    var prevLink = "<a href='#' class='prev'>上一页</a>";
    var nextLink = "<a href='#' class='next'>下一页</a>";

    pagination.innerHTML += prevLink;

    for (var i = 1; i <= totalPage; i++) {
      var button = "<a href='#'>" + i + "</a>";
      pagination.innerHTML += button;
    }

    pagination.innerHTML += nextLink;
  }

  var pagination = document.querySelector('.pagination');
  pagination.addEventListener('click', function(e) {
    e.preventDefault();
    var link = e.target;

    if (link.classList.contains('prev') && currentPage > 1) {
      currentPage--;
    } else if (link.classList.contains('next') && currentPage < totalPage) {
      currentPage++;
    } else if (link.tagName === 'A') {
      currentPage = parseInt(link.innerText);
    } else {
      return;
    }

    start = (currentPage - 1) * itemsPerPage;
    end = start + itemsPerPage;
    currentData = data.slice(start, end);

    renderData();
    renderPagination();
  });
}

总结

本篇文章介绍了如何使用原生JS实现分页展示效果。通过分步实现，我们可以清晰地了解到整个实现的过程。当然，上面的代码还可以进行优化和模块化，以提高代码的可复用性和可维护性。

本文标题为：原生JS分页展示效果（点击分页看效果）

上一篇： 深入理解JavaScript系列（22）：S.O.L.I.D五大原则之依赖倒置原则DIP详解
下一篇： javascript中href和replace的比较(详解)
猜你喜欢
最新文章
热门文章
基础教程
热门标签
网站首页 HTML/CSS 菜单 Layui Yii2