jquery翻页
使用jQuery实现翻页功能
翻页功能通常用于分页显示数据，提升用户体验。以下是几种常见的实现方式：
基础分页实现
HTML结构示例：
<div class="pagination">
<a href="#" class="prev">上一页</a>
<a href="#" class="page">1</a>
<a href="#" class="page">2</a>
<a href="#" class="next">下一页</a>
</div>
<div class="content"></div>jQuery代码：
$(document).ready(function(){
$('.page').click(function(e){
e.preventDefault();
var pageNum = $(this).text();
loadPage(pageNum);
});
$('.prev').click(function(e){
e.preventDefault();
// 获取当前页并减1
});
$('.next').click(function(e){
e.preventDefault();
// 获取当前页并加1
});
function loadPage(num){
$.ajax({
url: 'your_api_url',
data: {page: num},
success: function(data){
$('.content').html(data);
}
});
}
});动态分页实现
当页数较多时，可以动态生成分页控件：
function generatePagination(totalPages, currentPage){
var pagination = $('.pagination');
pagination.empty();
// 添加上一页按钮
pagination.append('<a href="#" class="prev">上一页</a>');
// 添加页码
for(var i=1; i<=totalPages; i++){
var active = i==currentPage ? 'active' : '';
pagination.append('<a href="#" class="page '+active+'">'+i+'</a>');
}
// 添加下一页按钮
pagination.append('<a href="#" class="next">下一页</a>');
}无限滚动分页
另一种现代分页方式是无限滚动：
$(window).scroll(function(){
if($(window).scrollTop() + $(window).height() == $(document).height()){
loadNextPage();
}
});
var currentPage = 1;
function loadNextPage(){
currentPage++;
$.get('your_api_url?page='+currentPage, function(data){
$('.content').append(data);
});
}注意事项
- 分页请求通常需要后端API支持
- 对于大量数据应考虑延迟加载
- 移动端可能需要不同的分页样式
- 当前页应高亮显示
- 首页和末页应禁用相应按钮
以上代码可根据实际需求进行调整，核心思路是通过jQuery处理点击事件或滚动事件，然后通过AJAX获取分页数据并更新页面内容。
