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

利用js制作html table分页示例(js实现分页)

• Java

下面是利用 js 制作 HTML table 分页示例的攻略。

一、分页概述

分页是指将大量的记录拆分成若干个页面进行展示，以减轻页面压力，提高页面加载速度。在实际开发中，我们通常会使用后端语言来实现分页，比如常用的 PHP 分页。但是，为了提高用户体验，我们也可以使用前端语言 JavaScript 来实现分页。

具体的，我们可以使用js将数据分成若干页，然后通过点击页码，实现内容的切换。下面我们将详细介绍如何利用 js 实现 HTML table 分页功能。

二、实现步骤

1. 数据准备

首先，我们需要将数据按照分页的规则进行拆分。在实际开发中，我们通常会在后端将数据进行分页，然后将分好的页数一起传到前端。在这里，为了简单起见，我们假设我们已经获取到了如下格式的数据：

var data = [
  { id: 1, name: "张三", age: 18 },
  { id: 2, name: "李四", age: 22 },
  { id: 3, name: "王五", age: 30 },
  { id: 4, name: "赵六", age: 25 },
  // 省略后面的数据
  { id: 100, name: "陈十", age: 27 },
];

2. 渲染表格

接下来，我们需要根据数据来渲染我们的表格。代码如下：

function renderTable(data) {
  var table = document.createElement("table");

  // 渲染表头
  var tr = document.createElement("tr");
  for (var key in data[0]) {
    var th = document.createElement("th");
    th.innerText = key;
    tr.appendChild(th);
  }
  table.appendChild(tr);

  // 渲染数据
  for (var i = 0; i < data.length; i++) {
    var tr = document.createElement("tr");
    for (var key in data[i]) {
      var td = document.createElement("td");
      td.innerText = data[i][key];
      tr.appendChild(td);
    }
    table.appendChild(tr);
  }

  document.body.appendChild(table);
}

3. 实现分页

我们需要根据表格中的总条数和每页显示的条数来计算总页数。代码如下：

var pageSize = 10; // 每页显示的条数
var pageNum = Math.ceil(data.length / pageSize); // 总页数

计算出总页数之后，接下来我们需要实现翻页功能。具体步骤如下：

  1. 给每个页码添加点击事件，点击时显示对应的页码内容。

  2. 根据当前页码和每页显示的条数，计算出当前页需要渲染的数据。这里我们使用了 Array.slice() 方法来获取对应的数据。

javascript
var start = (page - 1) * pageSize;
var end = page * pageSize;
var currentPageData = data.slice(start, end);

综合以上步骤，实现具体代码如下：

var currentPage = 1; // 当前页码
var pageSize = 10; // 每页显示的条数
var pageNum = Math.ceil(data.length / pageSize); // 总页数

renderTable(data.slice(0, pageSize)); // 默认显示第一页

// 渲染页码
var pageNav = document.createElement("div");
pageNav.style.textAlign = "center";
for (var i = 1; i <= pageNum; i++) {
  var a = document.createElement("a");
  a.href = "javascript:;";
  a.innerText = i;
  if (i === currentPage) {
    a.style.color = "red";
  }
  a.onclick = (function (page) {
    return function () {
      currentPage = page;
      renderTable(data.slice((page - 1) * pageSize, page * pageSize));
      updatePageNav();
    };
  })(i);
  pageNav.appendChild(a);
}

document.body.appendChild(pageNav);

// 渲染页码状态
function updatePageNav() {
  for (var i = 0; i < pageNav.children.length; i++) {
    if (+pageNav.children[i].innerText === currentPage) {
      pageNav.children[i].style.color = "red";
    } else {
      pageNav.children[i].style.color = "black";
    }
  }
}

上面的代码中，我们使用 Array.slice() 截取需要渲染的数据，然后渲染对应的表格，最后使用 updatePageNav() 方法更新页码状态。

4. 完整代码

下面是完整的实现代码：

var data = [
  { id: 1, name: "张三", age: 18 },
  { id: 2, name: "李四", age: 22 },
  { id: 3, name: "王五", age: 30 },
  { id: 4, name: "赵六", age: 25 },
  // 省略后面的数据
  { id: 100, name: "陈十", age: 27 },
];

var currentPage = 1; // 当前页码
var pageSize = 10; // 每页显示的条数
var pageNum = Math.ceil(data.length / pageSize); // 总页数

renderTable(data.slice(0, pageSize)); // 默认显示第一页

// 渲染表格
function renderTable(data) {
  var table = document.createElement("table");

  // 渲染表头
  var tr = document.createElement("tr");
  for (var key in data[0]) {
    var th = document.createElement("th");
    th.innerText = key;
    tr.appendChild(th);
  }
  table.appendChild(tr);

  // 渲染数据
  for (var i = 0; i < data.length; i++) {
    var tr = document.createElement("tr");
    for (var key in data[i]) {
      var td = document.createElement("td");
      td.innerText = data[i][key];
      tr.appendChild(td);
    }
    table.appendChild(tr);
  }

  document.body.appendChild(table);
}

// 渲染页码
var pageNav = document.createElement("div");
pageNav.style.textAlign = "center";
for (var i = 1; i <= pageNum; i++) {
  var a = document.createElement("a");
  a.href = "javascript:;";
  a.innerText = i;
  if (i === currentPage) {
    a.style.color = "red";
  }
  a.onclick = (function (page) {
    return function () {
      currentPage = page;
      renderTable(data.slice((page - 1) * pageSize, page * pageSize));
      updatePageNav();
    };
  })(i);
  pageNav.appendChild(a);
}
document.body.appendChild(pageNav);

// 渲染页码状态
function updatePageNav() {
  for (var i = 0; i < pageNav.children.length; i++) {
    if (+pageNav.children[i].innerText === currentPage) {
      pageNav.children[i].style.color = "red";
    } else {
      pageNav.children[i].style.color = "black";
    }
  }
}

三、示例说明

下面通过两个示例说明如何使用 JS 实现 HTML table 分页功能。

示例一：使用 Bootstrap 分页组件

Bootstrap 是一个前端开发框架，提供了很多实用的组件，包括分页组件。我们可以在分页组件中设置总页数和每页显示的条数，然后自动渲染相应的页码。具体步骤如下：

  1. 引入 Bootstrap 样式文件（CDN 或本地文件均可）。

  2. 在 HTML 中添加分页组件代码。

```html

```

  1. 在 JS 中初始化分页组件。

```javascript
var currentPage = 1; // 当前页码
var pageSize = 10; // 每页显示的条数
var pageNum = Math.ceil(data.length / pageSize); // 总页数

$(".pagination").bootstrapPaginator({
totalPages: pageNum,
visiblePages: 5,
currentPage: currentPage,
onPageChanged: function (event, oldPage, newPage) {
currentPage = newPage;
renderTable(data.slice((newPage - 1) * pageSize, newPage * pageSize));
},
});
```

示例二：使用 Layui 分页组件

Layui 是一个国内流行的前端框架，也提供了分页组件。和 Bootstrap 类似，我们也可以在分页组件中设置总页数和每页显示的条数，然后自动渲染相应的页码。具体步骤如下：

  1. 引入 Layui 样式文件和 JS 文件（CDN 或本地文件均可）。

  2. 在 HTML 中添加分页组件代码。

```html

```

  1. 在 JS 中初始化分页组件。

```javascript
var currentPage = 1; // 当前页码
var pageSize = 10; // 每页显示的条数
var pageNum = Math.ceil(data.length / pageSize); // 总页数

layui.use("laypage", function () {
layui.laypage.render({
elem: "page",
count: data.length,
limit: pageSize,
groups: 5,
curr: currentPage,
jump: function (obj, first) {
if (!first) {
currentPage = obj.curr;
renderTable(data.slice((obj.curr - 1) * pageSize, obj.curr * pageSize));
}
},
});
});
```

四、总结

以上就是利用 JS 实现 HTML table 分页功能的攻略和示例。在实际开发中，我们可以根据实际情况选择使用 Bootstrap、Layui、jQuery 等框架和库来简化代码编写。同时，我们还可以通过对分页组件进行自定义，来实现更多的分页效果和交互。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：利用js制作html table分页示例(js实现分页) - Python技术站

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

相关文章

  • Sprint Boot @CookieValue使用方法详解

    Spring Boot的@CookieValue的作用与使用方法 在Spring Boot中，@CookieValue注解用于获取HTTP请求中的Cookie值。通过使用@CookieValue注解，可以方便地获取HTTP请求中的Cookie值，并将其注入到方法参数中。在本文中，我们将详细介绍@CookieValue注解的作用和使用方法，并提供两个示例。 @…

    Java 2023年5月5日
    00

  • java中String，数组，ArrayList三者之间的转换

    对于Java中的String、数组和ArrayList，它们之间的转换是非常常见和实用的操作。下面我将为您提供一份完整攻略： 1. String转数组 将一个字符串转换成字符数组非常简单，只需要使用 String 类的 toCharArray() 方法即可。例如： String str = "Hello, world!"; char[] …

    Java 2023年5月26日
    00

  • 在Java中按值调用和按引用调用

    在Java中，传递参数时有两种方式：按值传递和按引用传递。这两种方式有着不同的使用场景和特点，需要进行深入的探讨。 按值传递 在Java中，按值传递是指将数据（即变量的值）复制一份传递给被调用的方法。修改被传递进方法中的值不会影响调用方法前变量的值。 下面是一个按值传递的例子： public class PassByValueExample { public…

    Java 2023年5月20日
    00

  • java读取csv文件内容示例代码

    讲解”java读取csv文件内容示例代码”的攻略，大致分为以下三个步骤： 1.读取csv文件 我们先使用Java自带的 BufferedReader 和 FileReader 类，来打开并读取csv文件： import java.io.BufferedReader; import java.io.FileReader; import java.io.IOEx…

    Java 2023年5月31日
    00

  • 基于@JsonProperty的使用说明

    让我来详细介绍一下如何在Java应用程序中使用基于@JsonProperty的技术。 什么是基于@JsonProperty的技术？ @JsonProperty是一个Jackson库中的注解，它可以帮助我们在Java对象和JSON文本之间进行转换。当Java对象被序列化和反序列化时，@JsonProperty注解可以将Java属性名和对应的JSON字段名进行映…

    Java 2023年5月26日
    00

  • Java Date类的使用案例详解

    Java Date类的使用案例详解 简介 Java中的Date类用于表示日期和时间。它被广泛用于处理时间和日期相关的应用程序。Date类的对象表示一个特定的瞬间，它包含了自从标准基准时间（称为“历元”）以来的毫秒数。 使用步骤 要使用Date类，需要依次进行以下步骤： 创建Date对象 使用Date对象进行操作 创建Date对象 可以使用以下方式创建Date…

    Java 2023年5月20日
    00

  • 如何使用gradle将java项目推送至maven中央仓库

    如何使用Gradle将Java项目推送至Maven中央仓库 Gradle是一种流行的构建工具，可以帮助Java开发人员自动化和简化项目构建过程。Maven是另一个流行的构建工具，也是Java项目中最广泛使用的依赖管理工具之一。Maven中央仓库是一个公共的存储库，可以作为发布和共享Java库的地方。本文将介绍如何使用Gradle将Java项目推送至Maven…

    Java 2023年5月20日
    00

  • SpringBoot加密配置文件的SQL账号密码方式

    下面是详细讲解SpringBoot加密配置文件的SQL账号密码方式的完整攻略： 什么是SpringBoot加密配置文件的SQL账号密码方式 在SpringBoot项目中使用外部配置文件保存敏感信息（如数据库账号密码）时，为了防止泄露，需要对这些信息进行加密处理。SpringBoot提供了多种加密方式，其中之一就是通过SQL账号密码方式。 具体而言，就是将配置…

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