不使用后端接口前端封装分页全部代码
时间: 2023-08-30 19:12:32 浏览: 49
以下是一个完整的前端手动分页的示例代码,包括数据请求、分页计算、翻页逻辑和页面渲染:
```javascript
// 数据请求
function fetchData() {
// 模拟数据请求
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve([
{ id: 1, name: 'Apple' },
{ id: 2, name: 'Banana' },
{ id: 3, name: 'Cherry' },
{ id: 4, name: 'Durian' },
{ id: 5, name: 'Eggplant' },
{ id: 6, name: 'Fig' },
{ id: 7, name: 'Grape' },
{ id: 8, name: 'Honeydew' },
{ id: 9, name: 'Kiwi' },
{ id: 10, name: 'Lemon' },
{ id: 11, name: 'Mango' },
{ id: 12, name: 'Nectarine' },
{ id: 13, name: 'Orange' },
{ id: 14, name: 'Pineapple' },
{ id: 15, name: 'Quince' },
{ id: 16, name: 'Raspberry' },
{ id: 17, name: 'Strawberry' },
{ id: 18, name: 'Tangerine' },
{ id: 19, name: 'Ugli fruit' },
{ id: 20, name: 'Watermelon' }
]);
}, 1000);
});
}
// 分页计算
function getPageData(dataList, pageSize, currentPage) {
var startIndex = (currentPage - 1) * pageSize;
var endIndex = startIndex + pageSize;
return dataList.slice(startIndex, endIndex);
}
// 翻页逻辑
var dataList = [];
var pageSize = 5; // 每页显示的数量
var currentPage = 1; // 当前页数
function prevPage() {
if (currentPage > 1) {
currentPage--;
renderPage();
}
}
function nextPage() {
if (currentPage < Math.ceil(dataList.length / pageSize)) {
currentPage++;
renderPage();
}
}
// 页面渲染
function renderPage() {
fetchData().then(data => {
dataList = data;
var pageData = getPageData(dataList, pageSize, currentPage);
var html = '';
html += '<ul>';
pageData.forEach(item => {
html += '<li>' + item.name + '</li>';
});
html += '</ul>';
html += '<div>';
html += '<button onclick="prevPage()">上一页</button>';
html += '<span>' + currentPage + '/' + Math.ceil(dataList.length / pageSize) + '</span>';
html += '<button onclick="nextPage()">下一页</button>';
html += '</div>';
document.getElementById('app').innerHTML = html;
});
}
renderPage(); // 初始化页面
```
此代码会在页面中生成一个包含数据列表和翻页按钮的UI,可以点击翻页按钮来切换当前显示的数据。