JavaScriptを使用してテーブルデータのページング表示を実装する-jsチュートリアル-php.cn

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

王林

リリース： 2023-06-16 10:00:11

オリジナル

2440 人が閲覧しました

データが増大し続けると、表の表示が難しくなります。ほとんどの場合、テーブル内のデータの量が多すぎるため、読み込みが遅くなり、ユーザーは必要なデータを見つけるために常にページを参照する必要があります。この記事では、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 では、最初にすべてのテーブルデータを含む配列を定義します。

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 サイトの他の関連記事を参照してください。