Using JavaScript to implement paging display of table data

As data continues to grow, table display becomes more difficult. Most of the time, the amount of data in a table is so large that it becomes slow to load and users need to constantly browse the page to find the data they want. This article will introduce how to use JavaScript to realize paginated display of table data, making it easier for users to find the data they want.

1. Dynamically create tables

In order to make the paging function more controllable, it is necessary to dynamically create tables. In the HTML page, add a table element similar to the one below.

serial number	Name	age	gender
1	小红	20	female
2	小明	twenty two	male
3	小花	25	female

In JavaScript, first define an array containing all table data:

let tableData = [
{ id: 1, name: '小红', age: 20, gender: 'Female ' },
{ id: 2, name: 'Xiao Ming', age: 22, gender: 'Male' },
{ id: 3, name: '小花', age: 25, gender: 'Female ' },
// More data
];

Next, create a function named "createTable", which will create an empty table element and insert it into the HTML page middle.

//Create table
function createTable() {
let table = document.createElement('table'); // Create table element
table.id = 'table-page' ; // Set id
table.classList.add('table'); // Add style
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 = 'Name';
tr.appendChild(thName);
let thAge = document.createElement('th');
thAge.innerHTML = 'Age' ;
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 (table);
}

Now, call the createTable function to create the table.

createTable();

2. Add paging

In JavaScript, create a new function named "pagination", which will be based on the required amount of data per page and the current page number to filter the table data and display the results in the table.

// Pagination function
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);

}
}

In this function, first get the table element and tbody element. Then, the range of data to be displayed is calculated using the specified amount of data per page and the current page number. Then, use the slice method to get the data to be displayed on the current page, and add it to the tbody element of the table in a loop.

3. Create a paging component

Next, create a function named "createPagination" to generate a paging component.

// Create pagination button component
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); 

}
}

This function will calculate the number of all pages and generate button components based on the number of each page. Within the loop, each button is created and attached to the "pagination" element. Finally, set the button's click event to call the pagination function "pagination()".

4. Apply to actual projects

In actual projects, you can replace the tableData array with data obtained from the server, and call the table creation and paging functions as needed.

// Asynchronous request data
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();

In this example, the XMLHttpRequest object is used to obtain data asynchronously. Then, the data is parsed into a JSON object and the createTable, pagination and createPagination functions are called respectively.

5. Summary

Through the above steps, we successfully used JavaScript to implement the basic function of paging table data. When the amount of data is large, this method will greatly improve the performance of the table and also provide users with a better interactive experience. After all, convenient and simple user experience is the charm of software.

The above is the detailed content of Using JavaScript to implement paging display of table data. For more information, please follow other related articles on the PHP Chinese website!