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

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

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

一、HTML 結構

首先，我們需要準備一個 HTML 結構來承載表格和分頁按鈕。我們可以使用 <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>

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

然後，我們建立一個函數來顯示指定頁碼的資料：

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 函數和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 實作表格分頁功能，並且可以根據自己的需求進行修改和自訂。希望本文對你有幫助！

以上是如何使用 JavaScript 實作表格分頁功能？的詳細內容。更多資訊請關注PHP中文網其他相關文章！