gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 02:01:44 24 4
gpt4 key购买 nike

我正在使用 NodeJS 构建一个博客,我使用“Mongoose Paginate”将数据库分为页面、Bootstrap 4、EJS 作为 View 引擎和 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>

最佳答案

这是 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
});

关于jquery - 如何使用 Node、Mongoose、Bootstrap 进行分页并将其传递给 html?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45724679/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com