用jquery写一个分页
时间: 2024-03-09 11:22:58 浏览: 16
以下是一个简单的使用 jQuery 实现分页的示例代码:
HTML 代码:
```html
<div id="pagination"></div>
<ul id="list"></ul>
```
jQuery 代码:
```javascript
var currentPage = 1; // 当前页码
var pageSize = 10; // 每页显示数量
var totalPages = 20; // 总页数
var totalItems = 200; // 总数据项数
// 初始化分页
function initPagination() {
// 计算总页数
totalPages = Math.ceil(totalItems / pageSize);
// 渲染分页导航栏
var paginationHtml = '';
for (var i = 1; i <= totalPages; i++) {
paginationHtml += '<a href="javascript:;" data-page="' + i + '">' + i + '</a>';
}
$('#pagination').html(paginationHtml);
// 绑定分页导航栏点击事件
$('#pagination a').click(function() {
var page = parseInt($(this).attr('data-page'));
if (page !== currentPage) {
currentPage = page;
loadData();
}
});
}
// 加载当前页数据
function loadData() {
// 计算起始和结束位置
var start = (currentPage - 1) * pageSize;
var end = Math.min(start + pageSize, totalItems);
// 模拟 AJAX 请求数据
setTimeout(function() {
// 清空列表
$('#list').empty();
// 显示当前页数据
for (var i = start; i < end; i++) {
$('#list').append('<li>' + i + '</li>');
}
}, 500);
}
// 初始化分页并加载数据
initPagination();
loadData();
```
在这个例子中,我们首先定义了一些分页相关的变量,包括当前页码、每页显示数量、总页数和总数据项数。在 `initPagination` 函数中,我们根据这些变量计算出总页数,并渲染出分页导航栏。在导航栏被点击时,我们更新当前页码,并重新加载数据。在 `loadData` 函数中,我们计算出当前页的起始和结束位置,并使用模拟的 AJAX 请求获取数据,然后将数据显示在列表中。