好的，下面是使用
jQuery 实现 ul-li 分页功能的代码示例：
HTML 代码：
```html
<div id="pagination">
<ul>
<li
class="prev"><a href="#">Prev</a></li>
<li
class="page"><a href="#">1</a></li>
<li
class="page"><a href="#">2</a></li>
<li
class="page"><a href="#">3</a></li>
<li
class="page"><a href="#">4</a></li>
<li
class="page"><a href="#">5</a></li>
<li
class="next"><a href="#">Next</a></li>
</ul>
</div>
```
C
SS 代码：
```c
ss
#pagination {
text-align: center;
}
#pagination ul {
display: inline-block;
margin: 0;
padding: 0;
}
#pagination li {
display: inline-block;
margin: 0;
padding: 0;
}
#pagination li a {
display: inline-block;
margin: 0 5px;
padding: 5px 10px;
border: 1px solid #ccc;
text-decoration: none;
color: #333;
}
#pagination li.active a {
background-color: #333;
color: #fff;
}
```
JavaScript 代码：
```
javascript
$(document).ready(function() {
var pageSize = 10; // 每页显示的记录数
var pageCount = 5; // 分页栏显示的页码数
var $pagination = $('#pagination ul');
var $prev = $pagination.find('.prev');
var $next = $pagination.find('.next');
var $pages = $pagination.find('.page');
// 计算总页数
var totalRecords = 100; // 总记录数
var totalPages = Math.ceil(totalRecords / pageSize);
// 初始化分页栏
function initPagination() {
$pages.hide();
$pages.filter(':lt(' + pageCount + ')').show();
$pagination.find('.active').remove
Class('active');
$pages.
eq(0).add
Class('active');
$prev.add
Class('disabled');
$next.toggle
Class('disabled', totalPages <= pageCount);
}
// 显示指定页码的记录
function showPage(page) {
var start = (page - 1) * pageSize;
var end = start + pageSize;
// 显示分页数据
// ...
}
// 点击分页栏页码
$pages.click(function() {
var $this = $(this);
if (!$this.
hasClass('active')) {
var page = $this.text();
showPage(page);
$pagination.find('.active').remove
Class('active');
$this.add
Class('active');
$prev.toggle
Class('disabled', page == 1);
$next.toggle
Class('disabled', page == totalPages);
if (page > pageCount && page < totalPages) {
$pages.hide();
$pages.filter(':lt(' + (pageCount - 2) + ')').show();
$pages.filter(':
eq(0),:
eq(-1)').show();
}
else if (page >= totalPages - pageCount + 2) {
$pages.hide();
$pages.filter(':gt(' + (totalPages - pageCount - 1) + ')').show();
$pages.filter(':
eq(0),:
eq(-1)').show();
}
}
});
// 点击上一页
$prev.click(function() {
var $this = $(this);
if (!$this.
hasClass('disabled')) {
var page = $pagination.find('.active').text();
showPage(page - 1);
$pagination.find('.active').remove
Class('active').prev().add
Class('active');
$prev.toggle
Class('disabled', page == 2);
$next.toggle
Class('disabled', false);
if (page > pageCount && page <= totalPages) {
$pages.hide();
$pages.filter(':lt(' + (pageCount - 2) + ')').show();
$pages.filter(':
eq(0),:
eq(-1)').show();
}
}
});
// 点击下一页
$next.click(function() {
var $this = $(this);
if (!$this.
hasClass('disabled')) {
var page = $pagination.find('.active').text();
showPage(parseInt(page) + 1);
$pagination.find('.active').remove
Class('active').next().add
Class('active');
$prev.toggle
Class('disabled', false);
$next.toggle
Class('disabled', page == totalPages - 1);
if (page >= 1 && page < totalPages - pageCount + 1) {
$pages.hide();
$pages.filter(':gt(' + (page - 2) + '):lt(' + (pageCount - 2) + ')').show();
$pages.filter(':
eq(0),:
eq(-1)').show();
}
}
});
// 初始化分页栏和显示第一页数据
initPagination();
showPage(1);
});
```
这段代码实现了一个简单的分页功能，其中 `totalRecords` 变量表示总记录数，`pageSize` 变量表示每页显示的记录数，`pageCount` 变量表示分页栏显示的页码数，可以根据实际情况进行调整。在 `showPage` 函数中可以实现分页数据的显示逻辑，具体实现可以根据实际情况进行编写。
597
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
