基本分页功能,请教 JS 代码该如何改进?

phoenix-sky 社区高级成员 T9 2021-05-26 07:31:16
参考网上并在论坛里热心人帮助下,实现一个基本的分页功能。
在先不用考虑封装、复用情况下,请教 JS 基本代码该如何改进?

谢谢!
下面是全部代码。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Go Coding!</title>
<style>
* {
margin: 0;
padding: 0;
border: none;
font-size: 12px;
list-style: none;
text-decoration: none;
}

body {
padding: 20px;
}

.title {
font-size: 36px;
color: #f80;
}

.title>small {
font-size: 24px;
color: #ccc;
vertical-align: 4px;
}

.tip {
color: #999;
}

.emp {
color: #f80;
}

.list>li {
padding: 6px;
border-bottom: 1px solid #eee;
}

.pagination {
padding: 4px;
}

.pagination a {
display: inline-block;
padding: 4px 8px;
color: #00c;
}

.pagination a.active {
font-weight: bold;
color: #f80;
background-color: #eee;
}

.pagination .tip {
margin: 0 0 0 10px;
}
</style>
</head>
<body>
<ul class="list"></ul>
<section class="pagination"></section>
<script>
let data = {
"list": [
{ "id": 1, "title": 2001 },
{ "id": 2, "title": 2002 },
{ "id": 3, "title": 2003 },
{ "id": 4, "title": 2004 },
{ "id": 5, "title": 2005 },
{ "id": 6, "title": 2006 },
{ "id": 7, "title": 2007 },
{ "id": 8, "title": 2008 },
{ "id": 9, "title": 2009 },
{ "id": 10, "title": 2010 },
{ "id": 11, "title": 2011 },
{ "id": 12, "title": 2012 },
{ "id": 13, "title": 2013 },
]
}

let list = data.list;
console.log(`Data Length: ${list.length}`);

pagination({
"current-page": 1,
"page-size": 1,
});

function pagination(par) {
let pagination = document.querySelector(".pagination");
let listBox = document.querySelector(".list");
let currentPage = par["current-page"];
let pageNums = par["page-nums"] || 5;
let pageSize = par["page-size"];
let num = data.list.length;
let totalPage = 0;

if (num / pageSize > parseInt(num / pageSize)) {
totalPage = parseInt(num / pageSize) + 1;
} else {
totalPage = parseInt(num / pageSize);
}

let sliceStart = (currentPage - 1) * pageSize;
let sliceEnd = currentPage * pageSize;
sliceEnd = sliceEnd > num ? num : sliceEnd;

let dataSlice = data.list.slice(sliceStart, sliceEnd);
let listText = "";
for (let item of dataSlice) {
listText += `
<li>
<h5 class="title"><small>${item.id} - </small>${item.title}</h5>
</li>
`;
}

listBox.innerHTML = listText;

let htmlText = "";
if (currentPage > 1) {
htmlText += `
<a href="#" onClick="pagination({'current-page': ${currentPage - 1}, 'page-size': ${pageSize}})">
上一页
</a>
`;
}

let start = currentPage - Math.floor(pageNums / 2);
let end = currentPage + Math.floor(pageNums / 2);

if (end < pageNums) {
end = pageNums;
}

if (end > totalPage) {
end = totalPage;
}

if (end - start != pageNums - 1) {
start = end - pageNums + 1;
}

if (start < 1) {
start = 1;
}

for (let i = start; i <= end; i++) {
htmlText += `
<a class="${currentPage === i ? 'item-link active' : 'item-link'}" href="#" data-index="${i}" onClick="pagination({'current-page': ${i}, 'page-size': ${pageSize}})">
${i}
</a>
`;
}

if (currentPage < totalPage) {
htmlText += `
<a href="#" onClick="pagination({'current-page': ${currentPage + 1}, 'page-size': ${pageSize}})">
下一页
</a>
`;
}

htmlText += `<span class="tip"><b class="emp">${currentPage}</b> / ${totalPage}</span>`;
pagination.innerHTML = htmlText;
}
</script>
</body>
</html>
...全文
247 1 打赏 收藏 举报
写回复
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
我爱小仙女 2021-05-27
1. 在保证功能完整的情况下,建议把渲染list和渲染pagination的功能分开。 pagination不需要每次都要重新innerHTML吧,分页第一次渲染后,后续在数据没变化时,分页的很多元素都是不变的,切换分页只需要修改当前页码样式及重渲染list就好了。 2. 在list数据很多时,不用把所有页码都显示出来,一般只需要 1,2,3,4,5...,100 这样,保证样式上不会太丑

for (let i = start; i <= end; i++) {
        htmlText += `
          <a class="${currentPage === i ? 'item-link active' : 'item-link'}" href="#" data-index="${i}" onClick="pagination({'current-page': ${i}, 'page-size': ${pageSize}})">
            ${i} 
          </a>
        `;
      }
  • 打赏
  • 举报
回复
相关推荐
发帖
JavaScript

8.7w+

社区成员

Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
帖子事件
创建了帖子
2021-05-26 07:31
社区公告
暂无公告