jquery分页显示
时间: 2023-07-10 21:21:29 浏览: 50
要使用jQuery实现分页显示,你可以先在HTML中创建一个用于显示内容的容器,再创建一个用于显示分页的容器。然后在JavaScript中使用jQuery选择器选中这些容器,使用Ajax从服务器获取数据,将数据填充到内容容器中,并根据数据总量和每页显示的数量计算出页数,生成相应数量的分页按钮,并将按钮填充到分页容器中。当用户点击分页按钮时,再次使用Ajax从服务器获取对应页数的数据,更新内容容器中的数据。
以下是一个简单的示例代码:
HTML部分:
```
<div id="content"></div>
<div id="pagination"></div>
```
JavaScript部分:
```
var pageSize = 10; //每页显示的数量
var currentPage = 1; //当前页数
function loadData(page) {
$.ajax({
url: 'data.php',
type: 'get',
data: {page: page, pageSize: pageSize},
success: function(data) {
//将数据填充到content容器中
$('#content').html(data);
//计算总页数
var totalCount = parseInt($('#totalCount').text());
var totalPages = Math.ceil(totalCount / pageSize);
//生成分页按钮
var paginationHtml = '';
for (var i = 1; i <= totalPages; i++) {
if (i == currentPage) {
paginationHtml += '<span class="current">' + i + '</span>';
} else {
paginationHtml += '<span>' + i + '</span>';
}
}
$('#pagination').html(paginationHtml);
//绑定分页按钮的点击事件
$('#pagination span').click(function() {
currentPage = parseInt($(this).text());
loadData(currentPage);
});
}
});
}
loadData(currentPage);
```
这段代码会从一个名为data.php的服务器端脚本获取数据,并将数据填充到id为content的容器中。分页按钮的样式可以自行定义,这里只是简单地使用了span标签。