使用JavaScript實作表格資料的分頁顯示

隨著資料的不斷成長，表格顯示變得更加困難。大多數情況下，表格中的資料量過大，導致表格在載入時變得緩慢，而且使用者需要不斷地瀏覽頁面才能找到自己想要的資料。本文將介紹如何使用JavaScript實作表格資料的分頁顯示，讓使用者更容易找到自己想要的資料。

一、動態建立表格

為了讓分頁功能更可控，需要動態建立表格。在HTML頁面中，加入一個類似下面的table元素。

編號	姓名	年齡	性別
1	小紅	20	女
2	小明	22	男
3	小花	25	女

在JavaScript中，先定義一個包含所有表格資料的陣列：

let tableData = [
{ id: 1, name: '小紅', age: 20, gender: '女' },
{ id: 2, name: '小明', age: 22, gender: '男' },
{ id: 3, name: '小花', age: 25, gender: '女' },
// 更多資料
];

接下來，建立一個名為「createTable」的函數，這個函數將建立空的table元素並將其插入到HTML頁面中。

// 建立表格
function createTable() {
let table = document.createElement('table'); // 建立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 = '編號';
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 = '性別';
tr.appendChild(thGender);
thead.appendChild(tr);
table.appendChild(thead);
let tbody = document.createElement('tbody');
table.appendChild(tbody);
document.body.appendChildld (table);
}

現在，呼叫createTable函數來建立表格。

createTable();

二、新增分頁

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

}
}

在這個函數中，先取得table元素與tbody元素。然後，透過指定的每頁資料量和目前頁碼來計算要顯示的資料範圍。然後，透過使用slice方法來取得目前頁面要顯示的數據，並將其循環新增至表格的tbody元素中。

三、建立分頁元件

接下來，建立一個名為「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（）」。

四、應用到實際專案中

在實際專案中，可以將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函數。

五、總結

透過上述步驟，我們成功地使用JavaScript實現了分頁顯示表格資料的基本功能。當資料量較大時，這種方法將大大提高表格的效能，同時也為使用者提供更好的互動體驗。畢竟，方便簡單的使用者體驗才是軟體的魅力所在。

以上是使用JavaScript實作表格資料的分頁顯示的詳細內容。更多資訊請關注PHP中文網其他相關文章！