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事件机制

    深入理解JavaScript事件机制 JavaScript的事件机制为我们在网页中开发交互体验提供了强大的支持。要深入理解JavaScript事件机制包括以下三个方面： 事件类型 事件模型 事件处理函数 事件类型 JavaScript中定义了很多事件类型，例如鼠标相关的事件类型包括： click 鼠标单击事件 dblclick 鼠标双击事件 mousedow…

    JavaScript 2023年6月11日
    00

  • php cookie用户登录的详解及实例代码

    现在我来给您详细讲解“php cookie用户登录的详解及实例代码”的完整攻略。 概述 在网站开发中，登录是一个非常重要的功能。其中，保存用户登录状态的方式有多种，其中之一就是通过使用cookie来保存用户信息。本文将通过示例代码，详细讲解如何使用php cookie来实现用户登录。 实现步骤 步骤一：创建登录页面 首先，我们需要在HTML中创建一个登录页面…

    JavaScript 2023年6月11日
    00

  • javascript实现仿银行密码输入框效果的代码

    要实现仿银行密码输入框效果的代码，可以参考如下的攻略： 1. HTML代码 首先，在HTML中需要创建一个文本框，该文本框用于输入密码。为了保证输入的密码的安全性，我们需要将该文本框的type属性设置为password，例如： <input type="password" id="password" /> …

    JavaScript 2023年6月11日
    00

  • 什么是JavaScript注入攻击?

    JavaScript注入攻击是指攻击者通过篡改网页中的JavaScript代码，向网站注入恶意的JavaScript语句，从而实现对网站的攻击行为。此种攻击手段常被黑客用于窃取、篡改或者删除网站中的个人信息、交易记录等敏感信息。 攻击者通过JavaScript注入攻击，可以在用户访问受攻击网站时，进行一下常见的攻击行为: 劫持网站表单：攻击者通过JavaSc…

    JavaScript 2023年5月19日
    00

  • JavaScript 申明函数的三种方法 每个函数就是一个对象（一）

    根据你的要求，我来详细讲解一下“JavaScript 申明函数的三种方法 每个函数就是一个对象（一）”的完整攻略。 什么是函数？ 在JavaScript中，函数是一种可重用的代码块，可以接收输入信息并返回输出。我们可以使用函数来封装一些代码，然后在需要的时候调用它。 申明函数的三种方法 在JavaScript中，我们可以使用三种不同的方式来申明一个函数。 1…

    JavaScript 2023年5月27日
    00

  • Javascript中定义方法的另类写法(批量定义js对象的方法)

    当我们定义一个JavaScript对象时，其属性值不仅可以是数据类型，也可以是函数类型。在对象属性中定义方法时，常见的是采用“键值对”的方式，即将方法名作为键，方法本身作为值。但是在JavaScript中，还有一种另类的定义方法的方式，即“批量定义js对象的方法”。 以下是实现该方法的步骤： 1.首先定义一个对象： var obj = {}; 2.然后利用f…

    JavaScript 2023年6月10日
    00

  • JS与Ajax Get和Post在使用上的区别实例详解

    来讲一下 “JS与Ajax Get和Post在使用上的区别实例详解” 的攻略。首先，我们需要了解什么是 Ajax，Ajax 全称是 Asynchronous JavaScript and XML，可以异步地向服务器发送请求并获取响应，这使得我们可以在不刷新整个页面的情况下更新部分页面和数据。 Ajax Get 和 Post 方法的区别 在 Ajax 的请求中…

    JavaScript 2023年6月11日
    00

  • js+数组实现网页上显示时间/星期几的实用方法

    让我为您详细解释一下，如何使用 js+数组实现网页上显示时间/星期几的实用方法。 1. 获取时间 我们可以使用 Date() 方法获取到当前时间对象，然后使用 getDate(), getMonth(), getFullYear(), getHours(), getMinutes(), getSeconds() 方法获取到相应的时间数据。将这些数据组合起来即…

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