如何使用 Node、Mongoose、Bootstrap 进行分页并将其传递给 html？

Posted 2023-03-08

【中文标题】如何使用 Node、Mongoose、Bootstrap 进行分页并将其传递给 html？

【英文标题】：How to make pagination with Node, Mongoose, Bootstrap and pass it to html?

【发布时间】：2018-01-25 06:04:31

【问题描述】：

我正在使用 NodeJS 构建博客，我正在使用“Mongoose Paginate”将数据库划分为页面、Bootstrap 4、EJS 作为视图引擎和JQuery Pagination Plugin。我不知道如何将分页实际传递给 html，我挣扎了一周但找不到解决方案；我希望 html 中的图形数字 1、2、3、4、5 动态链接到相应的页面，数字 1 到 www.site/page/1 等等，同时显示例如只有五个可点击的数字当时，但随着用户点击更高的数字，数字应该以图形方式增加。提前谢谢你。

APP.JS

app.get('/page/:page', (req, res) => 
 var pagina = req.params.page;
 Blog.paginate(, page: pagina, limit: 5).then((docs) => 
 //console.log(docs)
 res.render('page.ejs', docs)
, (e) => 
res.status(404)
 );
);

Script.js

$(document).ready(function () 
  $('#pagination-demo').twbsPagination(
    totalPages: 10,
    visiblePages: 5,
    href: true,
    onPageClick: function (event, page) 
      $('#page-content').text('Page ' + page);
     
 );
);

Page.ejs

<nav aria-label="...">
   <ul id="pagination-demo"  class="pagination">
     <li class="page-item"><a class="page-link" href="#">Previous</a</li>
     <% for(var i = 1; i <= pages ; i++) %>
      <li class="page-item"><a href="/page/<%=i%>"><%=i%></a></li>
     <%  %>
     <li class="page-item"><a class="page-link" href="#">Next</a></li>
   </ul>
</nav>

【问题讨论】：

您能否就您所问的内容添加一个问题？

另外，HREF（URL）中是否有页码？

【参考方案1】：

这是 ES6 伪代码：

$(".page-link").click(() => 
  let currentPage = +(location.pathname.replace(/\/page\/(\d+)\b/, "$1")),
      lastPage = currentPage - 1,
      nextPage = currentPage + 1,
      visible = 5,
      max = 10;

      // the rest of the code goes here
);