如何实现无刷新分页使用Ajax

发布时间：2025-02-08 14:45:45 作者：小樊
来源：亿速云阅读：81

实现无刷新分页使用Ajax的过程主要包括以下几个步骤：

创建HTML页面，包括显示数据的容器、分页按钮和每页显示的数据数量选择器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax Pagination</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="data-container">
        <!-- 数据将在这里显示 -->
    </div>
    <div id="pagination">
        <button id="previous-page">上一页</button>
        <select id="page-size">
            <option value="5">每页5条</option>
            <option value="10">每页10条</option>
            <option value="20">每页20条</option>
        </select>
        <button id="next-page">下一页</button>
    </div>
    <script src="pagination.js"></script>
</body>
</html>

编写JavaScript代码（例如，命名为pagination.js），用于处理分页逻辑。

$(document).ready(function () {
    let currentPage = 1;
    const pageSize = 5; // 每页显示的数据条数
    let totalPages = 0;

    // 获取数据并渲染到页面上
    function fetchData(page) {
        $.ajax({
            url: 'your_server_url', // 替换为你的服务器URL
            type: 'GET',
            data: {
                page: page,
                pageSize: pageSize
            },
            success: function (response) {
                renderData(response.data);
                totalPages = response.totalPages;
            },
            error: function (error) {
                console.log('Error fetching data:', error);
            }
        });
    }

    // 渲染数据到页面上
    function renderData(data) {
        let dataList = '<ul>';
        data.forEach(function (item) {
            dataList += `<li>${item.name}</li>`; // 根据你的数据结构修改
        });
        dataList += '</ul>';
        $('#data-container').html(dataList);
    }

    // 初始化第一页的数据
    fetchData(currentPage);

    // 处理上一页按钮点击事件
    $('#previous-page').click(function () {
        if (currentPage > 1) {
            currentPage--;
            fetchData(currentPage);
        }
    });

    // 处理下一页按钮点击事件
    $('#next-page').click(function () {
        if (currentPage < totalPages) {
            currentPage++;
            fetchData(currentPage);
        }
    });

    // 处理每页显示数据数量选择器变化事件
    $('#page-size').change(function () {
        pageSize = $(this).val();
        currentPage = 1; // 重置为第一页
        fetchData(currentPage);
    });
});

在服务器端，创建一个API接口来处理分页请求。这个接口应该能够根据请求中的page和pageSize参数返回相应的数据和总页数。以下是一个使用Node.js和Express框架的示例：

const express = require('express');
const app = express();
const port = 3000;

// 假设我们有一个名为items的数组存储数据
const items = [
    { id: 1, name: 'Item 1' },
    { id: 2, name: 'Item 2' },
    // ...
];

// 分页API接口
app.get('/api/data', (req, res) => {
    const page = parseInt(req.query.page) || 1;
    const pageSize = parseInt(req.query.pageSize) || 5;

    const startIndex = (page - 1) * pageSize;
    const endIndex = page * pageSize;

    const dataToShow = items.slice(startIndex, endIndex);
    const totalPages = Math.ceil(items.length / pageSize);

    res.json({ data: dataToShow, totalPages: totalPages });
});

app.listen(port, () => {
    console.log(`Server is running at http://localhost:${port}`);
});

请注意，你需要根据自己的数据结构和后端技术栈来调整上述代码。

如何实现无刷新分页使用Ajax

相关阅读