你可以帮我优化一下上面的代码吗?
时间: 2024-03-08 18:47:22 浏览: 16
当然可以,以下是我对上述代码的优化建议:
1. 将分页算法封装为一个独立函数,用于计算页码并生成分页按钮,提高代码的可读性和复用性。
2. 将每页显示的记录数和表格ID作为参数传递到函数中,使得函数更加通用。
3. 将当前页码和总页码数的显示逻辑封装为一个独立函数。
4. 去除无用的代码,如paginateTable函数中的updatePage函数调用,以及updatePage函数中的多余分页算法调用。
以下是经过优化后的代码:
```
function tablePagination(tableId, pageSize) {
// 获取表格和分页元素
var table = document.getElementById(tableId);
var pagination = document.getElementById('pagination');
// 计算总页数
var pageCount = Math.ceil(table.rows.length / pageSize);
// 显示当前页码和总页码数
function displayPageInfo() {
var currentPage = parseInt(pagination.querySelector('.active').innerText);
var pageInfo = document.getElementById('pageInfo');
pageInfo.innerText = '第 ' + currentPage + ' 页,共 ' + pageCount + ' 页';
}
// 生成分页按钮
function generatePagination() {
pagination.innerHTML = '';
for (var i = 1; i <= pageCount; i++) {
var button = document.createElement('button');
button.innerText = i;
if (i === 1) {
button.classList.add('active');
}
button.addEventListener('click', function() {
var currentPage = parseInt(this.innerText);
var activeButton = pagination.querySelector('.active');
activeButton.classList.remove('active');
this.classList.add('active');
displayPageInfo();
for (var j = 0; j < table.rows.length; j++) {
var row = table.rows[j];
if (j < (currentPage - 1) * pageSize || j >= currentPage * pageSize) {
row.style.display = 'none';
} else {
row.style.display = '';
}
}
});
pagination.appendChild(button);
}
}
// 初始化分页
generatePagination();
displayPageInfo();
for (var i = 0; i < table.rows.length; i++) {
var row = table.rows[i];
if (i >= pageSize) {
row.style.display = 'none';
}
}
}
```
在优化后的代码中,我们将分页算法封装为了一个generatePagination函数,并且将每页显示的记录数和表格ID作为参数传递到了函数中。我们还将显示当前页码和总页码数的逻辑封装为了一个displayPageInfo函数,使得代码更加清晰。最后,我们去除了无用的代码,使得代码更加简洁、高效。