How to use JavaScript to implement table paging function?

How to use JavaScript to implement table paging function?

With the development of the Internet, more and more websites use tables to display data. In some cases where the amount of data is large, the data needs to be displayed in pages to improve user experience. This article will introduce how to use JavaScript to implement table paging function and provide specific code examples.

1. HTML structure

First, we need to prepare an HTML structure to host tables and paging buttons. We can use the <table> tag to create a table, and the <code><div> tag as a container for paging buttons. The specific code is as follows: <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> 2. JavaScript implementation</p> <p>Next, we use JavaScript to implement the table paging function. First, we need to define some variables: </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>Then, we create a function to display the data of the specified page number: </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>Next, we create a function to generate paging buttons: </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>Finally, we call the <code>displayPage function and the createPagination function to display the initial page number data and generate the paging button:

displayPage(currentPage);
createPagination();

3. Complete code example

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

4. Summary

Through the above JavaScript code, we can realize the table paging function. First, we need to prepare the HTML structure containing the table and pagination buttons. Then, we use JavaScript to control the display of data for a specified page number and generate paging buttons. Finally, call related functions to display the data of the initial page number and generate paging buttons. The code examples provided in this article can help you understand how to use JavaScript to implement table paging function, and can be modified and customized according to your own needs. Hope this article is helpful to you!