JavaScriptを使用してテーブルデータのページング表示を実装する

データが増大し続けると、表の表示が難しくなります。ほとんどの場合、テーブル内のデータの量が多すぎるため、読み込みが遅くなり、ユーザーは必要なデータを見つけるために常にページを参照する必要があります。この記事では、JavaScript を使用して表データのページ分割表示を実現し、ユーザーが目的のデータを見つけやすくする方法を紹介します。

1. テーブルを動的に作成する

ページング機能をより制御しやすくするには、テーブルを動的に作成する必要があります。 HTML ページに、以下のようなテーブル要素を追加します。

＃＃＃シリアルナンバー＃＃＃ ＃＃＃名前＃＃＃ ＃＃＃年＃＃＃ ＃＃＃性別＃＃＃ 20 ＃＃＃女性＃＃＃ ＃＃＃22＃＃＃ ＃＃＃男＃＃＃ 小花 ＃＃＃女性＃＃＃

		1	小红
2	小明		3
25		JavaScript では、最初にすべてのテーブル データを含む配列を定義します。 let tableData = [ { id: 1, name: '小红', age: 20, 性別: ' Female ' } , { id: 2, 名前: 'シャオミン', 年齢: 22, 性別: '男性' }, { id: 3, 名前: '小花', 年齢: 25, 性別: '女性 ' }, // その他のデータ ]; 次に、空のテーブル要素を作成し、HTML ページの中央に挿入する「createTable」という名前の関数を作成します。 //テーブルの作成 function createTable() { let table = document.createElement('table'); // テーブル要素の作成 table.id = 'table-page' ; // id を設定します table.classList.add('table'); // スタイルを追加します let thead = document.createElement('thead'); let tr = document.createElement('tr '); let thNum = document.createElement('th'); thNum.innerHTML = 'number'; tr.appendChild(thNum); let thName = document.createElement(' th'); thName.innerHTML = '名前'; tr.appendChild(thName); let thAge = document.createElement('th'); thAge.innerHTML = '年齢' ; tr.appendChild(thAge); let thGender = document.createElement('th'); thGender.innerHTML = 'Gender'; tr.appendChild(thGender); thead.appendChild(tr); table.appendChild(thead); let tbody = document.createElement('tbody'); table.appendChild(tbody); document.body.appendChild (テーブル); } 次に、createTable 関数を呼び出してテーブルを作成します。 createTable(); 2. ページングの追加 JavaScript で、ページごとに必要なデータ量に基づく「pagination」という名前の新しい関数を作成します。と現在のページ番号を使用してテーブル データをフィルタリングし、結果をテーブルに表示します。 // ページネーション関数 function pagination(pageSize, pageNumber) { let table = document.getElementById('table-page'); let tbody = table.querySelector('tbody '); let start = pageSize * (pageNumber - 1); let end = start pageSize; let d = tableData.slice(start, end); tbody.innerHTML = '' ; for (let i = 0; i < d.length; i ) { let tr = document.createElement('tr'); for (let key in d[i]) { let td = document.createElement('td'); td.innerHTML = d[i][key]; tr.appendChild(td); } tbody.appendChild(tr); } } この関数では、まずテーブル要素と tbody を取得します。要素。次に、指定されたページあたりのデータ量と現在のページ番号を使用して、表示されるデータの範囲が計算されます。次に、slice メソッドを使用して現在のページに表示するデータを取得し、それをループ内のテーブルの tbody 要素に追加します。 3. ページング コンポーネントの作成 次に、ページング コンポーネントを生成する「createPagination」という名前の関数を作成します。 // ページネーション ボタン コンポーネントを作成します function createPagination(pageSize) { let totalPage = Math.ceil(tableData.length / pageSize); let pagination = document.getElementById('pagination '); if (!pagination) { pagination = document.createElement('div'); pagination.id = 'pagination'; document.body.appendChild(pagination); } pagination.innerHTML = ''; for (let i = 1; i <= totalPage; i ) { let btn = document.createElement('button'); btn.innerHTML = i; btn.onclick = function() { pagination(pageSize, i) }; pagination.appendChild(btn); } } この関数は、すべてのページの数を計算し、各ページの数に基づいてボタン コンポーネントを生成します。ループ内で、各ボタンが作成され、「pagination」要素にアタッチされます。最後に、ボタンのクリックイベントを設定して、ページネーション関数「pagination()」を呼び出します。 4. 実際のプロジェクトへの適用 実際のプロジェクトでは、tableData 配列をサーバーから取得したデータに置き換え、必要に応じてテーブル作成関数やページング関数を呼び出すことができます。 // 非同期リクエスト データ let xhr = new XMLHttpRequest(); xhr.open('GET', '/getData'); xhr.onload = function() { let data = JSON.parse(xhr.responseText); tableData = data; createTable(); pagination(pageSize, pageNumber); createPagination(pageSize); } xhr.send(); この例では、XMLHttpRequest オブジェクトを使用してデータを非同期に取得します。次に、データが JSON オブジェクトに解析され、createTable、pagination、createPagination 関数がそれぞれ呼び出されます。 5. 概要 上記の手順により、JavaScript を使用してテーブル データのページングの基本機能を実装することができました。データの量が多い場合、この方法によりテーブルのパフォーマンスが大幅に向上し、ユーザーにより良い対話型エクスペリエンスが提供されます。結局のところ、便利でシンプルなユーザーエクスペリエンスがソフトウェアの魅力です。

以上がJavaScriptを使用してテーブルデータのページング表示を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。