jQuery实现分页功能（含ajax请求、后台数据、附完整demo）

下面我将详细讲解“jQuery实现分页功能（含ajax请求、后台数据、附完整demo）”的完整攻略。

第一步：准备工作

在开始编写代码之前，我们需要引入所需的库文件。这里需要引入jQuery和Bootstrap的js和css文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery分页功能实现</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

    <!-- 内容区域 -->
    <div class="container">
        <div class="row">
            <div class="col-md-8 col-md-offset-2">
                <h1>jQuery分页功能实现</h1>
                <table class="table" id="table">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>姓名</th>
                            <th>年龄</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
                <nav>
                    <ul class="pagination" id="pagination"></ul>
                </nav>
            </div>
        </div>
    </div>

    <!-- 引入 jQuery -->
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <!-- 引入 Bootstrap -->
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

第二步：发送Ajax请求获取后台数据

我们需要编写一个发送Ajax请求的函数，从后台获取数据。这里的请求方式是GET请求，数据返回格式是JSON格式。完整的代码如下：

function getData(page) {
    $.ajax({
        url: "http://your-api-url", // your API url
        type: "GET",
        dataType: "json",
        data: {
            page: page
        },
        success: function(data) {
            // 处理数据
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(jqXHR.responseText);
        }
    });
}

第三步：处理获取的数据并渲染到页面上

在成功获取数据后，我们需要处理数据并将数据渲染到页面上。同时，我们还需要计算分页的相关信息，生成分页按钮。完整的代码如下：

function getData(page) {
    $.ajax({
        url: "http://your-api-url", // your API url
        type: "GET",
        dataType: "json",
        data: {
            page: page
        },
        success: function(data) {
            // 处理数据
            var tbody = $("#table tbody");
            tbody.empty();
            $.each(data.result, function(i, item) {
                var tr = $("<tr>");
                tr.append($("<td>").text((page - 1) * 10 + i + 1));
                tr.append($("<td>").text(item.name));
                tr.append($("<td>").text(item.age));
                tbody.append(tr);
            });

            // 计算分页信息
            var totalPages = Math.ceil(data.total / 10);
            var currentPage = parseInt(page);
            var pagination = $("#pagination");
            pagination.empty();

            // 添加上一页按钮
            if (currentPage !== 1) {
                var li = $("<li>").append($("<a>").attr("href", "#").text("上一页"));
                li.click(function() {
                    getData(currentPage - 1);
                });
                pagination.append(li);
            }

            // 添加数字按钮
            for (var i = currentPage - 2; i <= currentPage + 2; i++) {
                if (i > 0 && i <= totalPages) {
                    var li = $("<li>").append($("<a>").attr("href", "#").text(i));
                    if (i === currentPage) {
                        li.addClass("active");
                    } else {
                        li.click(function() {
                            getData($(this).text());
                        });
                    }
                    pagination.append(li);
                }
            }

            // 添加下一页按钮
            if (currentPage !== totalPages) {
                var li = $("<li>").append($("<a>").attr("href", "#").text("下一页"));
                li.click(function() {
                    getData(currentPage + 1);
                });
                pagination.append(li);
            }
        },
        error: function(jqXHR, textStatus, errorThrown) {
            console.log(jqXHR.responseText);
        }
    });
}

示例说明

下面给出两个示例说明：

示例1：后台数据为静态数据

如果我们的后台数据是静态数据，我们可以在本地使用Mock.js模拟一个API。示例代码如下：

// 准备静态数据
var mockData = Mock.mock({
    "result|30": [{
        "name": "@cname",
        "age|18-60": 1
    }],
    "total": 30
});

// Mock一个API
Mock.mock("/api?page=1", "get", function(options) {
    var queryParams = parseQueryParams(options.url);
    var page = parseInt(queryParams.page) || 1;
    var result = mockData.result.slice((page - 1) * 10, page * 10);
    return {
        "code": 0,
        "message": "success",
        "result": result,
        "total": mockData.total
    };
});

// 解析URL参数
function parseQueryParams(url) {
    var params = {};
    var index = url.indexOf("?");
    if (index !== -1) {
        var queryString = url.substring(index + 1);
        var pairs = queryString.split("&");
        for (var i = 0; i < pairs.length; i++) {
            var pair = pairs[i].split("=");
            if (pair.length === 2) {
                params[pair[0]] = decodeURIComponent(pair[1]);
            }
        }
    }
    return params;
}

// 初始化分页
$(function() {
    getData(1);
});

示例2：后台数据从数据库中读取

如果我们的后台数据从数据库中读取，我们可以编写一个简单的API，从数据库中读取数据。示例代码如下：

// 编写API获取数据
app.get("/api", function(req, res) {
    var page = parseInt(req.query.page) || 1;
    var countPromise = db.collection("users").countDocuments();
    var findPromise = db.collection("users").find().skip((page - 1) * 10).limit(10).toArray();

    Promise.all([countPromise, findPromise]).then(function(results) {
        var total = results[0];
        var result = results[1];
        res.json({
            code: 0,
            message: "success",
            result: result,
            total: total
        });
    }).catch(function(err) {
        console.log(err);
        res.json({
            code: -1,
            message: "failed"
        });
    });
});

// 初始化分页
$(function() {
    getData(1);
});

完整代码

下面是完整代码：

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery实现分页功能（含ajax请求、后台数据、附完整demo） - Python技术站