How to use JavaScript to implement table paging function?
With the development of the Internet, more and more websites use tables to display data. In some cases where the amount of data is large, the data needs to be displayed in pages to improve user experience. This article will introduce how to use JavaScript to implement table paging function and provide specific code examples.
1. HTML structure
First, we need to prepare an HTML structure to host tables and paging buttons. We can use the 2. JavaScript implementation Next, we use JavaScript to implement the table paging function. First, we need to define some variables: Then, we create a function to display the data of the specified page number: Next, we create a function to generate paging buttons: Finally, we call the 3. Complete code example 4. Summary Through the above JavaScript code, we can realize the table paging function. First, we need to prepare the HTML structure containing the table and pagination buttons. Then, we use JavaScript to control the display of data for a specified page number and generate paging buttons. Finally, call related functions to display the data of the initial page number and generate paging buttons. The code examples provided in this article can help you understand how to use JavaScript to implement table paging function, and can be modified and customized according to your own needs. Hope this article is helpful to you! The above is the detailed content of How to use JavaScript to implement table paging function?. For more information, please follow other related articles on the PHP Chinese website! tag to create a table, and the
列名1
列名2
列名3
var table = document.getElementById("myTable"); // 表格
var tbody = table.getElementsByTagName("tbody")[0]; // 表格的 tbody 元素
var rowsPerPage = 10; // 每页显示的行数
var currentPage = 0; // 当前页码
var totalPages = Math.ceil(tbody.rows.length / rowsPerPage); // 总页数
var pagination = document.getElementById("pagination"); // 分页按钮的容器
function displayPage(page) {
// 清空表格
while (tbody.firstChild) {
tbody.removeChild(tbody.firstChild);
}
// 计算起始行和结束行的索引
var startIndex = page * rowsPerPage;
var endIndex = Math.min(startIndex + rowsPerPage, tbody.rows.length);
// 将指定页码的数据添加到表格中
for (var i = startIndex; i < endIndex; i++) {
tbody.appendChild(tbody.rows[i].cloneNode(true));
}
}
function createPagination() {
// 清空分页按钮
while (pagination.firstChild) {
pagination.removeChild(pagination.firstChild);
}
// 添加上一页按钮
var previousButton = document.createElement("button");
previousButton.innerText = "上一页";
previousButton.onclick = function() {
currentPage = Math.max(currentPage - 1, 0);
displayPage(currentPage);
};
pagination.appendChild(previousButton);
// 添加页码按钮
for (var i = 0; i < totalPages; i++) {
var pageButton = document.createElement("button");
pageButton.innerText = i + 1;
pageButton.onclick = function() {
currentPage = parseInt(this.innerText) - 1;
displayPage(currentPage);
};
pagination.appendChild(pageButton);
}
// 添加下一页按钮
var nextButton = document.createElement("button");
nextButton.innerText = "下一页";
nextButton.onclick = function() {
currentPage = Math.min(currentPage + 1, totalPages - 1);
displayPage(currentPage);
};
pagination.appendChild(nextButton);
}
displayPage
function and the createPagination
function to display the initial page number data and generate the paging button: displayPage(currentPage);
createPagination();
var table = document.getElementById("myTable");
var tbody = table.getElementsByTagName("tbody")[0];
var rowsPerPage = 10;
var currentPage = 0;
var totalPages = Math.ceil(tbody.rows.length / rowsPerPage);
var pagination = document.getElementById("pagination");
function displayPage(page) {
while (tbody.firstChild) {
tbody.removeChild(tbody.firstChild);
}
var startIndex = page * rowsPerPage;
var endIndex = Math.min(startIndex + rowsPerPage, tbody.rows.length);
for (var i = startIndex; i < endIndex; i++) {
tbody.appendChild(tbody.rows[i].cloneNode(true));
}
}
function createPagination() {
while (pagination.firstChild) {
pagination.removeChild(pagination.firstChild);
}
var previousButton = document.createElement("button");
previousButton.innerText = "上一页";
previousButton.onclick = function() {
currentPage = Math.max(currentPage - 1, 0);
displayPage(currentPage);
};
pagination.appendChild(previousButton);
for (var i = 0; i < totalPages; i++) {
var pageButton = document.createElement("button");
pageButton.innerText = i + 1;
pageButton.onclick = function() {
currentPage = parseInt(this.innerText) - 1;
displayPage(currentPage);
};
pagination.appendChild(pageButton);
}
var nextButton = document.createElement("button");
nextButton.innerText = "下一页";
nextButton.onclick = function() {
currentPage = Math.min(currentPage + 1, totalPages - 1);
displayPage(currentPage);
};
pagination.appendChild(nextButton);
}
displayPage(currentPage);
createPagination();