如何使用 JavaScript 實作表格分頁功能？

如何使用 JavaScript 實作表格分頁功能？

隨著網路的發展，越來越多的網站都會使用表格來展示資料。在某些資料量較大的情況下，需要將資料進行分頁展示，以提升使用者體驗。本文將介紹如何使用 JavaScript 實作表格分頁功能，並提供具體的程式碼範例。

一、HTML 結構

首先，我們需要準備一個 HTML 結構來承載表格和分頁按鈕。我們可以使用 <table> 標籤來建立表格，使用 <code><div> 標籤來作為分頁按鈕的容器。具體程式碼如下：<pre class='brush:php;toolbar:false;'>&lt;table id=&quot;myTable&quot;&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;列名1&lt;/th&gt; &lt;th&gt;列名2&lt;/th&gt; &lt;th&gt;列名3&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; &lt;tbody&gt; &lt;!-- 表格数据 --&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;div id=&quot;pagination&quot;&gt; &lt;!-- 分页按钮 --&gt; &lt;/div&gt;</pre><p>二、JavaScript 實作</p> <p>接下來，我們使用 JavaScript 來實作表格分頁功能。首先，我們需要定義一些變數：</p><pre class='brush:php;toolbar:false;'>var table = document.getElementById(&quot;myTable&quot;); // 表格 var tbody = table.getElementsByTagName(&quot;tbody&quot;)[0]; // 表格的 tbody 元素 var rowsPerPage = 10; // 每页显示的行数 var currentPage = 0; // 当前页码 var totalPages = Math.ceil(tbody.rows.length / rowsPerPage); // 总页数 var pagination = document.getElementById(&quot;pagination&quot;); // 分页按钮的容器</pre><p>然後，我們建立一個函數來顯示指定頁碼的資料：</p><pre class='brush:php;toolbar:false;'>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 &lt; endIndex; i++) { tbody.appendChild(tbody.rows[i].cloneNode(true)); } }</pre><p>接下來，我們建立一個函數來生成分頁按鈕：</p> <pre class='brush:php;toolbar:false;'>function createPagination() { // 清空分页按钮 while (pagination.firstChild) { pagination.removeChild(pagination.firstChild); } // 添加上一页按钮 var previousButton = document.createElement(&quot;button&quot;); previousButton.innerText = &quot;上一页&quot;; previousButton.onclick = function() { currentPage = Math.max(currentPage - 1, 0); displayPage(currentPage); }; pagination.appendChild(previousButton); // 添加页码按钮 for (var i = 0; i &lt; totalPages; i++) { var pageButton = document.createElement(&quot;button&quot;); pageButton.innerText = i + 1; pageButton.onclick = function() { currentPage = parseInt(this.innerText) - 1; displayPage(currentPage); }; pagination.appendChild(pageButton); } // 添加下一页按钮 var nextButton = document.createElement(&quot;button&quot;); nextButton.innerText = &quot;下一页&quot;; nextButton.onclick = function() { currentPage = Math.min(currentPage + 1, totalPages - 1); displayPage(currentPage); }; pagination.appendChild(nextButton); }</pre><p>最後，我們呼叫<code>displayPage 函數和createPagination 函數來顯示初始頁碼的資料並生成分頁按鈕：

displayPage(currentPage);
createPagination();

三、完整程式碼範例

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

四、總結

透過上述的JavaScript 程式碼，我們可以實作表格分頁功能。首先，我們需要準備好包含表格和分頁按鈕的 HTML 結構。然後，我們使用 JavaScript 來控制顯示指定頁碼的數據，並生成分頁按鈕。最後，呼叫相關函數來顯示初始頁碼的資料並生成分頁按鈕。本文提供的程式碼範例可以幫助你了解如何使用 JavaScript 實作表格分頁功能，並且可以根據自己的需求進行修改和自訂。希望本文對你有幫助！