js
时间: 2023-07-23 20:13:34 浏览: 37
好的,那我先给你提供一个简单的分页函数作为参考:
```javascript
function paging(totalPage, currentPage, displayNum) {
var half = Math.floor(displayNum / 2);
var start = currentPage - half;
if (start < 1) {
start = 1;
}
var end = start + displayNum - 1;
if (end > totalPage) {
end = totalPage;
}
if (end - start + 1 < displayNum) {
start = end - displayNum + 1;
if (start < 1) {
start = 1;
}
}
var pages = [];
for (var i = start; i <= end; i++) {
pages.push(i);
}
return pages;
}
```
这个函数接受三个参数:
- totalPage: 总页数
- currentPage: 当前页
- displayNum: 显示的页码数
例如,你可以这样调用这个函数:
```javascript
paging(10, 5, 5);
```
这会返回一个数组,包含了显示的页码,例如:`[3, 4, 5, 6, 7]`。
你可以根据这个数组来生成分页的HTML,例如:
```javascript
var pages = paging(10, 5, 5);
var html = '<ul class="pagination">';
if (pages.indexOf(1) === -1) {
html += '<li class="page-item"><a class="page-link" href="?page=1">1</a></li>';
if (pages.indexOf(2) === -1) {
html += '<li class="page-item disabled"><span class="page-link">...</span></li>';
}
}
for (var i = 0; i < pages.length; i++) {
var page = pages[i];
if (page === currentPage) {
html += '<li class="page-item active"><span class="page-link">' + page + '</span></li>';
} else {
html += '<li class="page-item"><a class="page-link" href="?page=' + page + '">' + page + '</a></li>';
}
}
if (pages.indexOf(totalPage) === -1) {
if (pages.indexOf(totalPage - 1) === -1) {
html += '<li class="page-item disabled"><span class="page-link">...</span></li>';
}
html += '<li class="page-item"><a class="page-link" href="?page=' + totalPage + '">' + totalPage + '</a></li>';
}
html += '</ul>';
```
这段代码会生成一个分页的HTML,例如:
```
<ul class="pagination">
<li class="page-item"><a class="page-link" href="?page=1">1</a></li>
<li class="page-item disabled"><span class="page-link">...</span></li>
<li class="page-item"><a class="page-link" href="?page=4">4</a></li>
<li class="page-item active"><span class="page-link">5</span></li>
<li class="page-item"><a class="page-link" href="?page=6">6</a></li>
<li class="page-item disabled"><span class="page-link">...</span></li>
<li class="page-item"><a class="page-link" href="?page=10">10</a></li>
</ul>
```
这个分页HTML包含了总共10页,当前页是第5页,显示5个页码。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)