About a paging, no thought, want to consult.-CodePudding

online reference code implements a basic pagination function, not fully implemented, has no better ideas, consult everybody here,
1: now displays all pages, should be a show only [1, 2, 3, 4, 5] [6,7,8,9,10],12,13,14,15 [11] this page;
2: JS which parts should improve?

Thank you very much!
Here are all the code

 & lt; ! DOCTYPE html> 
 
<meta charset="utf-8" & gt; 
<meta name="viewport" content="width=device - width, initial - scale=1.0" & gt; 
<meta HTTP - equiv="X - UA - Compatible" content="ie=edge" & gt; 
 Go Coding!  
<style> 
* {
margin: 0; 
padding: 0; 
Border: none; 
list-style: none; 
text-decoration: none; 
font-size: 12px; 
} 

Body {
Padding: 20 px; 
} 

The title {
font-size: 16px; 
Color: # f80; 
} 

. List> Li {
Padding: 6 px; 
Border - bottom: 1 px solid # eee; 
} 

The pagination {
Padding: 4 px; 
} 

Pagination a {
display: inline-block; 
Padding: 4 px; 
Margin: 0 4 px 0 0; 
Color: # 00 c; 
} 
</style> 
 
<body> 
 
 
<script> 
Let data={
 https://bbs.csdn.net/topics/"A list" : [
{" id ": 1," title ": 2001}, 
{" id ": 2," title ": 2002}, 
{" id ": 3," title ": 2003}, 
{" id ": 4," title ": 2004}, 
5, {" id ":" title ": 2005}, 
{" id ": 6," title ": 2006}, 
{" id ": 7," title ": 2007}, 
{" id ": 8," title ": 2008}, 
{9, "id" : "title" : 2009}, 
{" id ": 10," title ": 2010}, 
11, {" id ":" title ": 2011}, 
12, {" id ":" title ": 2012}, 
13, {" id ":" title ": 2013}, 
{" id ": 14," title ": 2014}, 
{" id ": 15," title ": 2015}, 
16, {" id ":" title ": 2016}, 
] 
} 

Let the list=data. The list; 
The console. The log (` list - length: ${list. Length} `); 

Pagination ({
"The current - page" : 1, 
"Page - size: 5, 
}); 

The function pagination (par) {
Let the listBox=document. QuerySelector (" list "); 
Let num=data. List. Length; 
Let totalPage=0; 
Let pageSize=par [" page - size "]; 
Let currentPage=par [" current - page "]; 

If (num/pageSize & gt; ParseInt (num/pageSize)) {
TotalPage=parseInt (num/pageSize) + 1; 
} else {
TotalPage=parseInt (num/pageSize); 
} 

Let sliceStart=(currentPage - 1) * pageSize; 
Let sliceEnd pageSize=currentPage *; 
SliceEnd=sliceEnd & gt; Num? Num: sliceEnd; 

Let dataSlice=data. List. Slice (sliceStart sliceEnd); 
Let listText=""; 
For (let the item of dataSlice) {
ListText +=` 
  
`; 
} 
ListBox. InnerHTML=listText; 

Let htmlText=""; 
If (currentPage & gt; 1) {
HtmlText +=` 
Previous page 
 
`; 
} 

For (the let I=1; I & lt; TotalPage + 1; I++) {
HtmlText +=` 
The ${I} 
 
`; 
} 

If (currentPage & lt; TotalPage) {
HtmlText +=` 
The next page 
 
`; 
} 

Let pagination=document. QuerySelector (" pagination "); 
Pagination. InnerHTML=htmlText; 
} 
</script>