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

一、動(dòng)態(tài)建立表格

為了讓分頁(yè)功能更可控，需要?jiǎng)討B(tài)建立表格。在HTML頁(yè)面中，加入一個(gè)類似下面的table元素。

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

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

接下來(lái)，建立一個(gè)名為「createTable」的函數(shù)，這個(gè)函數(shù)將建立空的table元素並將其插入到HTML頁(yè)面中。

// 建立表格
function createTable() {
let table = document.createElement('table'); // 建立table元素
table.id = 'table-page' ; // 設(shè)定id
table.classList.add('table'); // 新增樣式
let thead = document.createElement('thead');
let tr = document.createElement('tr ');
let thNum = document.createElement('th');
thNum.innerHTML = '編號(hào)';
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);
}

現(xiàn)在，呼叫createTable函數(shù)來(lái)建立表格。

createTable();

二、新增分頁(yè)

在JavaScript中，新建一個(gè)函數(shù)名為“pagination”，該函數(shù)將根據(jù)所需的每頁(yè)資料量和目前頁(yè)碼來(lái)過(guò)濾表格數(shù)據(jù)，並將結(jié)果顯示在表格中。

// 分頁(yè)函數(shù)
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);

}
}

在這個(gè)函數(shù)中，先取得table元素與tbody元素。然後，透過(guò)指定的每頁(yè)資料量和目前頁(yè)碼來(lái)計(jì)算要顯示的資料範(fàn)圍。然後，透過(guò)使用slice方法來(lái)取得目前頁(yè)面要顯示的數(shù)據(jù)，並將其循環(huán)新增至表格的tbody元素中。

三、建立分頁(yè)元件

接下來(lái)，建立一個(gè)名為「createPagination」的函數(shù)來(lái)生成分頁(yè)元件。

// 建立分頁(yè)按鈕元件
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); 

}
}

本函數(shù)將計(jì)算所有的頁(yè)數(shù)，並基於每頁(yè)數(shù)量產(chǎn)生按鈕元件。在循環(huán)中，每個(gè)按鈕被建立並附加到「pagination」元素上。最後，將按鈕的點(diǎn)擊事件設(shè)定為呼叫分頁(yè)函數(shù)「pagination（）」。

四、應(yīng)用到實(shí)際專案中

在實(shí)際專案中，可以將tableData數(shù)組替換為從伺服器取得的數(shù)據(jù)，並根據(jù)需要呼叫建立表格和分頁(yè)函數(shù)。

// 非同步請(qǐng)求資料
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();

在這個(gè)範(fàn)例中，使用XMLHttpRequest物件非同步取得資料。然後，將資料解析為JSON對(duì)象，並分別呼叫createTable，pagination和createPagination函數(shù)。

五、總結(jié)

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

以上是使用JavaScript實(shí)作表格資料的分頁(yè)顯示的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！