技术2026-01-14 10

在服务端实现分页功能的项目中,如何实现分页中的上一页和下一页的启用和禁用,在自己的实践中,经历痛苦的摸索.网上也没有找到有关的针对性文章, 经过反复琢磨, 最终成功达成效果; 分享给初学者和同道.也为自己做个记录.

应用场景: node项目,后端操作数据库,实现分页功能 (服务端分页控制),并设置分页中的 "上一页" 和 "下一页" 的启用和禁用功能

一. 后端处理数据库,查寻数据, 实现分页,(服务端分页控制)

二.后端传递数据,在前端通过模板 art-template 实现分页,

三.如何处理分页中的上一页和下一页的启用和禁用?

1, 当前页处于第1页时, 需要上一页的按键被禁用, 当处于其它页时,恢复上一页的使用功能

2. 当前页处于最后一个页码时, 下一页的按键应该被禁用, 当处于其它页时, 下一页的功能恢复使用

四. 代码逻辑实现:

1. 后端处理

// 后端路由 Router.get("/poem", (req, res, next) => { // 定义当前页,这个当前页就是客户端点出时发送过来的页码数,把它变成number类型的十进抽数值 const page = Number.parseInt(req.query.page, 10); // 定义每页的显示数 const pageSize = 5; // 操作数据库集合中的数据 PoemsOne .find() .skip((page - 1) * pageSize) .limit(pageSize) .exec((err, poemsones) => { if (err) { return next(err); } PoemsOne.countDocuments((err, count) => { if (err) { return next(err); } const totalPages = []; const totalPage = Math.ceil(count / pageSize); for (let i = 0; i < totalPage; i++) { totalPages.push(i); } res.render("poem.html", { poemsones, totalPages, page, }); }); }); });

2. 前端模板处理: (totalPages是后端传递过来的一个数值数组) bootstrap框架

<ul class="pagination">  {{if page<=1}} <li class="disabled"><a href="javascript:;">上一页</a></li> {{else}}  <li><a href="/poem?page={{page-1}}">上一页</a></li> {{/if}}  {{each totalPages}} 代码略... {{/each }} <--对下一页添加逻辑判断,当前页值大于等于现有的页数时, 下一页按键功能被禁用,> {{if page>=totalPages.length}} <li class="disabled"><a href="javascript:;">下一页</a></li> {{else}} <--当处在其它页码时,恢复启用下一页的功能> <li><a href="/poem?page={{page+1}}">下一页</a></li> {{/if}} </ul>

通过以上,成功实现了简单的分页中上一页和下一页功能的启用和禁用.

技术简单, 大神和资深者可直接无视,如有错误,诚恳欢迎批评指正! 如对初学者稍有助益, 请点个好评

Processed: 0.016, SQL: 9

服务端分页实现上一页和下一页的启用和禁用