Menggunakan JavaScript untuk melaksanakan paparan halaman data jadual

Apabila data terus berkembang, paparan jadual menjadi lebih sukar. Selalunya, jumlah data dalam jadual adalah sangat besar sehingga menjadi lambat untuk dimuatkan dan pengguna perlu sentiasa menyemak imbas halaman untuk mencari data yang mereka inginkan. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk merealisasikan paparan bernombor bagi data jadual, menjadikannya lebih mudah untuk pengguna mencari data yang mereka inginkan.

1. Cipta jadual secara dinamik

Untuk menjadikan fungsi paging lebih terkawal, jadual perlu dibuat secara dinamik. Dalam halaman HTML, tambahkan elemen jadual yang serupa dengan yang di bawah.

编号	姓名	年龄	性别
1	小红	20	女
2	小明	22	男
3	小花	25	女

Dalam JavaScript, mula-mula tentukan tatasusunan yang mengandungi semua data jadual:

biar tableData = [
{ id: 1, nama: '小红', umur: 20, jantina: 'Perempuan ' } ,
{ id: 2, nama: 'Xiao Ming', umur: 22, jantina: 'Lelaki' },
{ id: 3, nama: '小花', umur: 25, jantina: 'Perempuan' },
// Lebih banyak data
];

Seterusnya, buat fungsi yang dipanggil "createTable", yang akan mencipta elemen jadual kosong dan memasukkannya ke tengah halaman HTML.

// Cipta jadual
fungsi createTable() {
biarkan jadual = document.createElement('table'); // Cipta elemen jadual
table.id = 'table-page' ; // Tetapkan id
table.classList.add('table'); // Tambah gaya
biarkan thead = document.createElement('thead');
biarkan tr = document.createElement('tr ');
biarkan thNum = document.createElement('th');
thNum.innerHTML = 'Number';
tr.appendChild(thNum);
biarkan thName = document.createElement(' th');
thName.innerHTML = 'Name';
tr.appendChild(thName);
biarkan thAge = document.createElement('th');
thAge.innerHTML = 'Umur' ;
tr.appendChild(thAge);
biarkan thGender = document.createElement('th');
thGender.innerHTML = 'Gender';
tr.appendChild(thGender);
thead.appendChild(tr);
table.appendChild(thead);
biarkan tbody = document.createElement('tbody');
table.appendChild(tbody);
document.body.appendChild (jadual);
}

Sekarang, panggil fungsi createTable untuk mencipta jadual.

createTable();

2. Tambah paging

Dalam JavaScript, buat fungsi baharu bernama "penomboran", yang akan berdasarkan jumlah data yang diperlukan setiap halaman dan nombor halaman semasa untuk menapis data jadual dan memaparkan keputusan dalam jadual.

// Fungsi penomboran
fungsi penomboran(pageSize, pageNumber) {
biarkan jadual = document.getElementById('table-page');
biarkan tbody = table.querySelector('tbody ');
biarkan mula = pageSize * (pageNombor - 1);
biarkan tamat = mula + pageSize;
biarkan d = tableData.slice(start, end);
tbody.innerHTML = ' ';
untuk (biar 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);

}
}

Dalam fungsi ini, mula-mula dapatkan elemen jadual dan elemen badan. Kemudian, julat data yang akan dipaparkan dikira menggunakan jumlah data yang ditentukan setiap halaman dan nombor halaman semasa. Kemudian, gunakan kaedah hirisan untuk mendapatkan data dipaparkan pada halaman semasa dan tambahkannya pada elemen tbody jadual dalam gelung.

3. Cipta komponen paging

Seterusnya, buat fungsi bernama "createPagination" untuk menjana komponen paging.

// Cipta komponen butang penomboran
fungsi createPagination(pageSize) {
biarkan totalPage = Math.ceil(tableData.length / pageSize);
biarkan penomboran = document.getElementById('penomboran ');
jika (!penomboran) {

pagination = document.createElement('div');
pagination.id = 'pagination';
document.body.appendChild(pagination);

}
penomboran.innerHTML = '';
untuk (biar i = 1; i <= totalPage; i++) {

let btn = document.createElement('button');
btn.innerHTML = i;
btn.onclick = function() {
  pagination(pageSize, i)
};
pagination.appendChild(btn); 

}
}

Fungsi ini akan mengira bilangan semua halaman dan menjana komponen butang berdasarkan bilangan setiap halaman. Dalam gelung, setiap butang dicipta dan dilampirkan pada elemen "penomboran". Akhir sekali, tetapkan acara klik butang untuk memanggil fungsi penomboran "penomboran()".

4. Gunakan pada projek sebenar

Dalam projek sebenar, anda boleh menggantikan tatasusunan tableData dengan data yang diperoleh daripada pelayan, dan memanggil fungsi penciptaan jadual dan halaman mengikut keperluan.

// Minta data secara tidak segerak
biar xhr = XMLHttpRequest();
xhr.open('GET', '/getData');
xhr.onload = function() {
biarkan data = JSON.parse(xhr.responseText);
tableData = data;
createTable();
penomboran(pageSize, pageNumber);
createPagination(pageSize);
}
xhr.send();

Dalam contoh ini, objek XMLHttpRequest digunakan untuk mendapatkan data secara tak segerak. Kemudian, data dihuraikan ke dalam objek JSON dan fungsi createTable, penomboran dan createPagination dipanggil masing-masing.

5. Ringkasan

Melalui langkah di atas, kami berjaya menggunakan JavaScript untuk melaksanakan fungsi asas memaparkan data jadual dalam halaman. Apabila jumlah data adalah besar, kaedah ini akan meningkatkan prestasi jadual dan juga memberikan pengguna pengalaman interaktif yang lebih baik. Lagipun, pengalaman pengguna yang mudah dan ringkas adalah daya tarikan perisian.

Atas ialah kandungan terperinci Menggunakan JavaScript untuk melaksanakan paparan halaman data jadual. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!