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

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 を使用してテーブル データのページングの基本機能を実装することができました。データの量が多い場合、この方法によりテーブルのパフォーマンスが大幅に向上し、ユーザーにより良い対話型エクスペリエンスが提供されます。結局のところ、便利でシンプルなユーザーエクスペリエンスがソフトウェアの魅力です。