Wie verwende ich JavaScript, um die Tabellen-Paging-Funktion zu implementieren?-js-Tutorial-php.cn

Wie verwende ich JavaScript, um die Tabellen-Paging-Funktion zu implementieren?

WBOY

Freigeben： 2023-10-20 18:19:46

Original

2007 Leute haben es durchsucht

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

Wie verwende ich JavaScript, um die Tabellen-Paging-Funktion zu implementieren?

Mit der Entwicklung des Internets verwenden immer mehr Websites Tabellen zur Darstellung von Daten. In einigen Fällen, in denen die Datenmenge groß ist, müssen die Daten auf Seiten angezeigt werden, um die Benutzererfahrung zu verbessern. In diesem Artikel wird erläutert, wie Sie JavaScript zum Implementieren der Tabellen-Paging-Funktion verwenden, und es werden spezifische Codebeispiele bereitgestellt.

1. HTML-Struktur

Zuerst müssen wir eine HTML-Struktur zum Hosten von Tabellen und Paging-Schaltflächen vorbereiten. Wir können das Tag <table> verwenden, um eine Tabelle zu erstellen, und das Tag <div> als Container für Paging-Schaltflächen. Der spezifische Code lautet wie folgt: <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>

Nach dem Login kopieren

二、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"); // 分页按钮的容器

Nach dem Login kopieren

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

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));
  }
}

Nach dem Login kopieren

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

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);
}

Nach dem Login kopieren

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

displayPage(currentPage);
createPagination();

Nach dem Login kopieren

2. JavaScript-Implementierung

Als nächstes verwenden wir JavaScript, um die Tabellen-Paging-Funktion zu implementieren. Zuerst müssen wir einige Variablen definieren:

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();

Nach dem Login kopieren

Dann erstellen wir eine Funktion zum Anzeigen von Daten für eine bestimmte Seitenzahl:

rrreee

Als Nächstes erstellen wir eine Funktion zum Generieren von Paging-Schaltflächen: 🎜rrreee🎜Abschließend rufen wir displayPage-Funktion und createPagination-Funktion zum Anzeigen der anfänglichen Seitenzahldaten und zum Generieren von Paginierungsschaltflächen: 🎜rrreee🎜 3. Vollständiges Codebeispiel 🎜rrreee 🎜 4. Zusammenfassung 🎜🎜Durch den obigen JavaScript-Code , können wir die Tabellen-Paging-Funktion implementieren. Zuerst müssen wir die HTML-Struktur vorbereiten, die die Tabellen- und Paginierungsschaltflächen enthält. Anschließend verwenden wir JavaScript, um die Anzeige von Daten für eine bestimmte Seitennummer zu steuern und Paging-Schaltflächen zu generieren. Rufen Sie abschließend verwandte Funktionen auf, um die anfänglichen Seitenzahldaten anzuzeigen und Paging-Schaltflächen zu generieren. Die in diesem Artikel bereitgestellten Codebeispiele können Ihnen helfen zu verstehen, wie Sie JavaScript zum Implementieren der Tabellen-Paging-Funktion verwenden, und können entsprechend Ihren eigenen Anforderungen geändert und angepasst werden. Ich hoffe, dieser Artikel ist hilfreich für Sie! 🎜

Das obige ist der detaillierte Inhalt vonWie verwende ich JavaScript, um die Tabellen-Paging-Funktion zu implementieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!