JQUERY写一个分页
时间: 2024-05-10 15:20:50 浏览: 127
JQUERY分页
对于一个分页的实现,我们需要考虑以下几个方面:
1. 分页的总页数是多少?
2. 每一页需要显示多少条数据?
3. 当前页是第几页?
4. 用户如何切换到下一页或上一页?
5. 用户如何跳转到指定的某一页?
下面是一个基于jQuery实现的分页示例代码:
HTML代码:
```
<div class="pagination">
<ul>
<li class="prev"><a href="#">«</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li class="next"><a href="#">»</a></li>
</ul>
</div>
```
CSS代码:
```
.pagination {
display: inline-block;
margin: 20px 0;
}
.pagination ul {
list-style: none;
margin: 0;
padding: 0;
}
.pagination li {
display: inline-block;
}
.pagination li a {
color: #666;
display: block;
padding: 5px 10px;
text-decoration: none;
}
.pagination li.active a {
color: #fff;
background-color: #337ab7;
}
.pagination li.disabled a {
color: #ccc;
cursor: not-allowed;
}
```
jQuery代码:
```
$(function() {
// 定义每一页显示的数据条数和当前页码
var pageSize = 10;
var currentPage = 1;
// 获取数据总条数,并计算总页数
var total = 100;
var totalPages = Math.ceil(total / pageSize);
// 渲染分页控件
renderPagination();
// 点击页码切换到相应的页面
$('.pagination').on('click', 'a', function(e) {
e.preventDefault();
var $this = $(this);
if ($this.parent().hasClass('disabled') || $this.parent().hasClass('active')) {
return;
}
if ($this.parent().hasClass('prev')) {
currentPage--;
} else if ($this.parent().hasClass('next')) {
currentPage++;
} else {
currentPage = parseInt($this.text());
}
renderPagination();
});
// 渲染分页控件
function renderPagination() {
var html = '';
// 渲染上一页按钮
if (currentPage == 1) {
html += '<li class="prev disabled"><a href="#">«</a></li>';
} else {
html += '<li class="prev"><a href="#">«</a></li>';
}
// 渲染数字按钮
for (var i = 1; i <= totalPages; i++) {
if (i == currentPage) {
html += '<li class="active"><a href="#">' + i + '</a></li>';
} else {
html += '<li><a href="#">' + i + '</a></li>';
}
}
// 渲染下一页按钮
if (currentPage == totalPages) {
html += '<li class="next disabled"><a href="#">»</a></li>';
} else {
html += '<li class="next"><a href="#">»</a></li>';
}
$('.pagination ul').html(html);
}
});
```
在这个示例中,我们定义了每一页显示的数据条数和当前页码,并通过计算总数据条数和每一页显示的数据条数来得到总页数。然后,我们渲染了一个分页控件,包括上一页、数字按钮和下一页三部分。当用户点击上一页或下一页按钮时,我们更新当前页码并重新渲染分页控件。当用户点击数字按钮时,我们跳转到相应的页码。最后,我们使用CSS样式来美化分页控件。
阅读全文