亚洲视频二区_亚洲欧洲日本天天堂在线观看_日韩一区二区在线观看_中文字幕不卡一区

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

隨著互聯網的發展，越來越多的網站都會使用表格來展示數據。在一些數據量較大的情況下，需要將數據進行分頁展示，以提升用戶體驗。本文將介紹如何使用 JavaScript 實現表格分頁功能，并提供具體的代碼示例。

一、HTML 結構

首先，我們需要準備一個 HTML 結構來承載表格和分頁按鈕。我們可以使用 f5d188ed2c074f8b944552db028f98a1 標簽來創建表格，使用 dc6dce4a544fdca2df29d5ac0ea9906b 標簽來作為分頁按鈕的容器。具體代碼如下：

<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 實現表格分頁功能？的詳細內容，更多請關注www.92cms.cn其它相關文章！