Bagaimana untuk menggunakan JavaScript untuk melaksanakan fungsi paging jadual?

Bagaimana untuk menggunakan JavaScript untuk melaksanakan fungsi paging jadual?

Dengan perkembangan Internet, semakin banyak laman web menggunakan jadual untuk memaparkan data. Dalam sesetengah kes di mana jumlah data adalah besar, data perlu dipaparkan dalam halaman untuk meningkatkan pengalaman pengguna. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan fungsi halaman jadual dan menyediakan contoh kod khusus.

1. Struktur HTML

Pertama, kita perlu menyediakan struktur HTML untuk mengehoskan jadual dan butang paging. Kita boleh menggunakan teg f5d188ed2c074f8b944552db028f98a1 untuk membuat jadual dan teg dc6dce4a544fdca2df29d5ac0ea9906b sebagai bekas untuk butang halaman. Kod khusus adalah seperti berikut: 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();

2. Pelaksanaan JavaScript

Seterusnya, kami menggunakan JavaScript untuk melaksanakan fungsi paging jadual. Pertama, kita perlu mentakrifkan beberapa pembolehubah:

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

Kemudian, kami mencipta fungsi untuk memaparkan data untuk nombor halaman yang ditentukan:

rrreee

Seterusnya, kami mencipta fungsi untuk menjana butang paging: 🎜rrreee🎜Akhir sekali, kami memanggil fungsi displayPage dan fungsi createPagination untuk memaparkan data nombor halaman awal dan menjana butang penomboran: 🎜rrreee🎜 3. Contoh kod lengkap 🎜rrreee 🎜 4. Ringkasan 🎜🎜Melalui kod JavaScript di atas , kita boleh Melaksanakan fungsi halaman halaman jadual. Pertama, kita perlu menyediakan struktur HTML yang mengandungi jadual dan butang penomboran. Kemudian, kami menggunakan JavaScript untuk mengawal paparan data untuk nombor halaman yang ditentukan dan menjana butang paging. Akhir sekali, panggil fungsi berkaitan untuk memaparkan data nombor halaman awal dan menjana butang paging. Contoh kod yang disediakan dalam artikel ini boleh membantu anda memahami cara menggunakan JavaScript untuk melaksanakan fungsi halaman halaman dan boleh diubah suai dan disesuaikan mengikut keperluan anda sendiri. Harap artikel ini membantu anda! 🎜

Atas ialah kandungan terperinci Bagaimana untuk menggunakan JavaScript untuk melaksanakan fungsi paging jadual?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!