1. Python技术站首页
  2. 其他
  3. JavaScript

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

• JavaScript

下面是“原生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分页展示效果（点击分页看效果） - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • Javascript Date setFullYear() 方法

    以下是关于JavaScript Date对象的setFullYear()方法的完整攻略，包括两个示例说明。 JavaScript Date对象的setFullYear()方法 JavaScript Date对象的setFullYear()方法设置日期对象的年份部分。该方法接受一个整数，表示要设置的年份。如果该参数超出了JavaScript所能表示的范围，则自…

    JavaScript 2023年5月11日
    00

  • js中.sort()函数的常见用法与高级操作

    让我们来具体讲解一下 JavaScript 中数组的 .sort() 方法吧。 基本用法 .sort() 方法用于对数组进行排序，它可以带一个可选的排序函数作为参数，用于控制排序规则。 默认的排序规则是将元素转换成字符串后进行比较，然后按照 Unicode 码点排序。比如，对于以下数组： const arr = [10, 5, 8, 3, 2]; 如果我们调…

    JavaScript 2023年5月19日
    00

  • javascript导出csv文件（excel）的方法示例

    下面是关于“javascript导出csv文件（excel）的方法示例”的完整攻略： 一、CSV文件格式介绍 CSV（Comma-Separated Values）就是指逗号分隔符，通常是一种保存矩阵数据的文件格式。每行记录表示一行，以逗号作为分隔符，不同列数据存在不同位置，可以通过表格对齐的方式方便地分辨出来。 例如：下面是一个CSV文件的模板： 姓名,学…

    JavaScript 2023年5月27日
    00

  • 小程序中实现excel数据的批量导入的示例代码

    下面是关于“小程序中实现excel数据的批量导入的示例代码”的完整攻略。 准备工作 在进行excel数据批量导入前，我们需要做一些准备工作：1. 准备一个excel文件，并将需要导入的数据按照一定的顺序保存在sheet表格中。比如我们要导入学生的姓名、年龄、班级等信息，则需将这些信息对应的字段分别保存在不同的列中；2. 借助开发者工具，在小程序中新建一个页面…

    JavaScript 2023年6月10日
    00

  • 利用JQUERY实现多个AJAX请求等待的实例

    当我们需要向服务器发送多个异步请求时，我们通常会使用jQuery的AJAX功能。但是当我们需要等待所有的请求都返回时才进行下一步操作时，该怎么办呢？这时，我们可以利用jQuery中的Promise对象来实现等待多个AJAX请求的处理。下面是利用jQuery实现多个AJAX请求等待的完整攻略。 基本使用方法 1. 创建多个deferred对象 我们可以使用jQ…

    JavaScript 2023年6月11日
    00

  • JS实现的自动打字效果示例

    接下来我将为你讲解“JS实现的自动打字效果示例”的完整攻略。 这是一个比较常见的网页效果，可以使用 JavaScript 来实现。整个过程大体可分为以下几个步骤： 步骤一：准备 HTML 结构 首先，你需要准备一个包含文字内容的 HTML 元素，例如： <div id="text"> <p>这是一段文本内容，我们将…

    JavaScript 2023年5月28日
    00

  • IE下JS读取xml文件示例代码

    当我们在IE下使用JavaScript读取XML文件时，我们需要使用ActiveXObject对象，并通过该对象来创建一个XMLHttpRequest对象。 下面是一个读取XML文件的示例代码： 示例1： // 创建XMLHttpRequest对象 var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP…

    JavaScript 2023年5月27日
    00

  • Javascript toFixed 方法

    以下是关于JavaScript toFixed方法的完整攻略。 JavaScript toFixed方法 JavaScript toFixed()方法是Number对象的一个方法，用于将数字转换字符串，并保留指定的小数位数。我们可以使用toFixed()方法来格式化数字，使其符合我们的需求。 下面是一个使用()方法的示例： var num = 3.14159…

    JavaScript 2023年5月11日
    00
合作推广
合作推广
分享本页
返回顶部