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

下面是利用 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); // 总页数

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

给每个页码添加点击事件，点击时显示对应的页码内容。
根据当前页码和每页显示的条数，计算出当前页需要渲染的数据。这里我们使用了 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 是一个前端开发框架，提供了很多实用的组件，包括分页组件。我们可以在分页组件中设置总页数和每页显示的条数，然后自动渲染相应的页码。具体步骤如下：

引入 Bootstrap 样式文件（CDN 或本地文件均可）。
在 HTML 中添加分页组件代码。

```html

```

在 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 类似，我们也可以在分页组件中设置总页数和每页显示的条数，然后自动渲染相应的页码。具体步骤如下：

引入 Layui 样式文件和 JS 文件（CDN 或本地文件均可）。
在 HTML 中添加分页组件代码。