Nodejs分页设计配合bootstrap-paginator

Nodejs分页设计配合bootstrap-paginator

前言

分页功能是查询大量数据时不可或缺的一部分。例如，当你需要查询超过1000条记录的结果集时，一次性加载所有数据不仅会消耗大量的带宽，还会增加用户的等待时间。通过分页功能，可以将数据分成若干小块，每次只显示一部分，这样用户可以更方便地浏览和处理数据。

目录

• 分页前端雏形：bootstrap-paginator
• 分页后端查询：mongoose
• 分页结果返回页面（后端 -> 前端）
• 分页查询参数传递（前端 -> 后端）
• 分页完整展现

示例代码

1. 分页前端雏形：bootstrap-paginator

首先，我们需要在前端引入bootstrap-paginator插件。你可以从GitHub下载或者直接通过CDN引入。

<!-- 引入必要的CSS和JS文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-paginator/0.8.4/bootstrap-paginator.min.js"></script>

接下来，我们创建一个简单的HTML结构：

<div id="example">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
            </tr>
        </thead>
        <tbody id="data"></tbody>
    </table>
    <ul id="pagination"></ul>
</div>

然后，初始化bootstrap-paginator：

$(function () {
    var options = {
        bootstrapMajorVersion: 4,
        currentPage: 1,
        totalPages: 10,
        numberOfPages: 5,
        onPageClicked: function (event, originalEvent, type, page) {
            loadPage(page);
        }
    };
    $('#pagination').bootstrapPaginator(options);
});

2. 分页后端查询：mongoose

在后端，我们可以使用Mongoose来处理数据库查询。假设我们有一个名为User的模型。

const mongoose = require('mongoose');
const User = mongoose.model('User', new mongoose.Schema({
    name: String
}));

// 查询分页数据
async function loadPage(page, limit) {
    const skip = (page - 1) * limit;
    const users = await User.find().skip(skip).limit(limit);
    return users;
}

3. 分页结果返回页面（后端 -> 前端）

后端将分页后的数据返回给前端，可以使用JSON格式：

app.get('/users', async (req, res) => {
    const page = parseInt(req.query.page) || 1;
    const limit = 10; // 每页显示10条记录
    const users = await loadPage(page, limit);
    res.json(users);
});

4. 分页查询参数传递（前端 -> 后端）

前端通过AJAX请求向后端传递分页参数：

function loadPage(page) {
    $.ajax({
        url: '/users',
        method: 'GET',
        data: { page: page },
        success: function (data) {
            $('#data').empty();
            data.forEach(user => {
                $('#data').append(`<tr><td>${user.id}</td><td>${user.name}</td></tr>`);
            });
        }
    });
}

5. 分页完整展现

完整的分页展现包括前端的UI布局、数据加载和分页控件的交互。通过上述步骤，我们实现了前后端协同工作，以提供流畅的分页体验。

总结

通过上述步骤，我们展示了如何使用Node.js和Mongoose实现分页功能，并配合bootstrap-paginator插件进行前端展示。希望这些示例代码能够帮助你更好地理解和实现分页功能。