JavaScript を使用してテーブル ページング機能を実装するにはどうすればよいですか?

JavaScript を使用してテーブル ページング機能を実装するにはどうすればよいですか?

インターネットの発展に伴い、テーブルを使用してデータを表示する Web サイトがますます増えています。データ量が多い場合には、ユーザー エクスペリエンスを向上させるためにデータをページに表示する必要があります。この記事では、JavaScript を使用してテーブル ページング機能を実装する方法と具体的なコード例を紹介します。

1. 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>

2. 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 関数を呼び出して、最初のページ番号データを表示し、ページング ボタンを生成します。 3. 完全なコード例

displayPage(currentPage);
createPagination();

4. まとめ

#上記の JavaScript コードにより、テーブル ページング機能を実現できます。まず、テーブルとページネーション ボタンを含む HTML 構造を準備する必要があります。次に、JavaScript を使用して、指定されたページ番号のデータの表示を制御し、ページング ボタンを生成します。最後に、関連関数を呼び出して、最初のページ番号のデータを表示し、ページング ボタンを生成します。この記事で説明されているコード例は、JavaScript を使用してテーブル ページング機能を実装する方法を理解するのに役立ち、独自のニーズに応じて変更およびカスタマイズできます。この記事がお役に立てば幸いです!

以上がJavaScript を使用してテーブル ページング機能を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。