Comment utiliser JavaScript pour implémenter la fonction de pagination de table ?-js tutoriel-php.cn

Comment utiliser JavaScript pour implémenter la fonction de pagination de table ?

WBOY

Libérer： 2023-10-20 18:19:46

original

1960 Les gens l'ont consulté

如何使用 JavaScript 实现表格分页功能？

Comment utiliser JavaScript pour implémenter la fonction de pagination de table ?

Avec le développement d'Internet, de plus en plus de sites Web utilisent des tableaux pour afficher les données. Dans certains cas où la quantité de données est importante, les données doivent être affichées dans des pages pour améliorer l'expérience utilisateur. Cet article explique comment utiliser JavaScript pour implémenter la fonction de pagination de table et fournit des exemples de code spécifiques.

1. Structure HTML

Tout d'abord, nous devons préparer une structure HTML pour héberger les tableaux et les boutons de pagination. Nous pouvons utiliser la balise <table> pour créer un tableau et la balise <div> comme conteneur pour les boutons de pagination. Le code spécifique est le suivant : <table> 标签来创建表格，使用 <div> 标签来作为分页按钮的容器。具体代码如下：

<table id="myTable">
  <thead>
    <tr>
      <th>列名1</th>
      <th>列名2</th>
      <th>列名3</th>
    </tr>
  </thead>
  <tbody>
    <!-- 表格数据 -->
  </tbody>
</table>

<div id="pagination">
  <!-- 分页按钮 -->
</div>

Copier après la connexion

二、JavaScript 实现

接下来，我们使用 JavaScript 来实现表格分页功能。首先，我们需要定义一些变量：

var table = document.getElementById("myTable"); // 表格
var tbody = table.getElementsByTagName("tbody")[0]; // 表格的 tbody 元素
var rowsPerPage = 10; // 每页显示的行数
var currentPage = 0; // 当前页码
var totalPages = Math.ceil(tbody.rows.length / rowsPerPage); // 总页数
var pagination = document.getElementById("pagination"); // 分页按钮的容器

Copier après la connexion

然后，我们创建一个函数来显示指定页码的数据：

function displayPage(page) {
  // 清空表格
  while (tbody.firstChild) {
    tbody.removeChild(tbody.firstChild);
  }

  // 计算起始行和结束行的索引
  var startIndex = page * rowsPerPage;
  var endIndex = Math.min(startIndex + rowsPerPage, tbody.rows.length);

  // 将指定页码的数据添加到表格中
  for (var i = startIndex; i < endIndex; i++) {
    tbody.appendChild(tbody.rows[i].cloneNode(true));
  }
}

Copier après la connexion

接下来，我们创建一个函数来生成分页按钮：

function createPagination() {
  // 清空分页按钮
  while (pagination.firstChild) {
    pagination.removeChild(pagination.firstChild);
  }

  // 添加上一页按钮
  var previousButton = document.createElement("button");
  previousButton.innerText = "上一页";
  previousButton.onclick = function() {
    currentPage = Math.max(currentPage - 1, 0);
    displayPage(currentPage);
  };
  pagination.appendChild(previousButton);

  // 添加页码按钮
  for (var i = 0; i < totalPages; i++) {
    var pageButton = document.createElement("button");
    pageButton.innerText = i + 1;
    pageButton.onclick = function() {
      currentPage = parseInt(this.innerText) - 1;
      displayPage(currentPage);
    };
    pagination.appendChild(pageButton);
  }

  // 添加下一页按钮
  var nextButton = document.createElement("button");
  nextButton.innerText = "下一页";
  nextButton.onclick = function() {
    currentPage = Math.min(currentPage + 1, totalPages - 1);
    displayPage(currentPage);
  };
  pagination.appendChild(nextButton);
}

Copier après la connexion

最后，我们调用 displayPage 函数和 createPagination

displayPage(currentPage);
createPagination();

Copier après la connexion

2. Implémentation de JavaScript

Ensuite, nous utilisons JavaScript pour implémenter la fonction de pagination des tables. Tout d'abord, nous devons définir quelques variables :

var table = document.getElementById("myTable");
var tbody = table.getElementsByTagName("tbody")[0];
var rowsPerPage = 10;
var currentPage = 0;
var totalPages = Math.ceil(tbody.rows.length / rowsPerPage);
var pagination = document.getElementById("pagination");

function displayPage(page) {
  while (tbody.firstChild) {
    tbody.removeChild(tbody.firstChild);
  }

  var startIndex = page * rowsPerPage;
  var endIndex = Math.min(startIndex + rowsPerPage, tbody.rows.length);

  for (var i = startIndex; i < endIndex; i++) {
    tbody.appendChild(tbody.rows[i].cloneNode(true));
  }
}

function createPagination() {
  while (pagination.firstChild) {
    pagination.removeChild(pagination.firstChild);
  }

  var previousButton = document.createElement("button");
  previousButton.innerText = "上一页";
  previousButton.onclick = function() {
    currentPage = Math.max(currentPage - 1, 0);
    displayPage(currentPage);
  };
  pagination.appendChild(previousButton);

  for (var i = 0; i < totalPages; i++) {
    var pageButton = document.createElement("button");
    pageButton.innerText = i + 1;
    pageButton.onclick = function() {
      currentPage = parseInt(this.innerText) - 1;
      displayPage(currentPage);
    };
    pagination.appendChild(pageButton);
  }

  var nextButton = document.createElement("button");
  nextButton.innerText = "下一页";
  nextButton.onclick = function() {
    currentPage = Math.min(currentPage + 1, totalPages - 1);
    displayPage(currentPage);
  };
  pagination.appendChild(nextButton);
}

displayPage(currentPage);
createPagination();

Copier après la connexion

Ensuite, nous créons une fonction pour afficher les données pour un numéro de page spécifié :

rrreee

Ensuite, nous créons une fonction pour générer des boutons de pagination : 🎜rrreee🎜Enfin, nous appelons displayPage et fonction createPagination pour afficher les données initiales du numéro de page et générer des boutons de pagination : 🎜rrreee🎜 3. Exemple de code complet 🎜rrreee 🎜 4. Résumé 🎜🎜Grâce au code JavaScript ci-dessus , nous pouvons implémenter la fonction de pagination de table. Tout d’abord, nous devons préparer la structure HTML contenant le tableau et les boutons de pagination. Ensuite, nous utilisons JavaScript pour contrôler l'affichage des données pour un numéro de page spécifié et générer des boutons de pagination. Enfin, appelez les fonctions associées pour afficher les données initiales du numéro de page et générer des boutons de pagination. Les exemples de code fournis dans cet article peuvent vous aider à comprendre comment utiliser JavaScript pour implémenter la fonction de pagination de table et peuvent être modifiés et personnalisés en fonction de vos propres besoins. J'espère que cet article vous sera utile ! 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!