在JavaScript中进行分页查询,通常涉及到前端与后端的交互。以下是一个基础的分页查询实现思路和示例代码:
currentPage
)和每页显示的数据条数(pageSize
)。假设我们有一个后端API /api/data
,它接受currentPage
和pageSize
作为查询参数,并返回对应的数据。
前端JavaScript代码:
async function fetchData(currentPage = 1, pageSize = 10) {
try {
const response = await fetch(`/api/data?currentPage=${currentPage}&pageSize=${pageSize}`);
const data = await response.json();
return data;
} catch (error) {
console.error('Error fetching data:', error);
return [];
}
}
// 使用示例
fetchData(1, 10).then(data => {
console.log('Fetched data:', data);
// 在这里处理数据,如渲染到页面上
});
后端示例(假设使用Node.js和Express):
const express = require('express');
const app = express();
// 假设我们有一个大数据集
const largeDataSet = [...]; // ...填充大量数据
app.get('/api/data', (req, res) => {
const currentPage = parseInt(req.query.currentPage) || 1;
const pageSize = parseInt(req.query.pageSize) || 10;
const startIndex = (currentPage - 1) * pageSize;
const endIndex = startIndex + pageSize;
const paginatedData = largeDataSet.slice(startIndex, endIndex);
res.json(paginatedData);
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
currentPage
并重新获取数据。startIndex
和endIndex
,并且数据集在分页过程中没有被修改。领取专属 10元无门槛券
手把手带您无忧上云