使用节点 js 进行分页答案

【问题标题】：Pagination with node js使用节点 js 进行分页
【发布时间】：2021-06-24 02:26:35
【问题描述】：

我正在尝试解决这个问题，但我似乎遗漏了一些东西。所以，我看过那个关于后端分页的视频https://www.youtube.com/watch?v=ZX3qt0UWifc，我已经在我的项目中实现了它，但是现在我在前端实现它时遇到了问题。根据该 URL（例如：“/posts?page=3&limit=5”），我的帖子显示正确，但我的分页栏有问题，即。如何根据我有多少帖子以及我实际在哪个页面上生成页码。例如，如果我在第 3 页，它将是。 3 活跃。如果我已经到达最后一页，那将是

//posts.js
function paginatedResults(model) {
    return async (req, res, next) => {
        const page = parseInt(req.query.page);
        const limit = parseInt(req.query.limit);
        const startIndex = (page - 1) * limit;
        const endIndex = page * limit;

        const results = {};
        if (endIndex < await model.countDocuments().exec()) {
            results.next = {
                page: page + 1,
                limit: limit
            };
        }
        if (startIndex > 0) {
            results.previous = {
                page: page - 1,
                limit: limit
            };
        }
        try {
            results.results = await model.find().limit(limit).skip(startIndex).exec();
            res.paginatedResults = results;
            next();
        } catch(e) {
            res.status(500).json({ message: e.message});
        }
    };
}

router.get("/", paginatedResults(Post), function (req, res) {
    var posts = res.paginatedResults;
    res.render("posts/index", {posts: res.paginatedResults, limit: 2})
});

//index.ejs
     <div class="col-sm-6">
          <ul class="pagination">
                <li>
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">«</span>
                    </a>
                </li>

                <li class="active"><a href="http://localhost:3000/posts?page=1&limit=2">1</a></li>
                <li><a href="http://localhost:3000/posts?page=2&limit=2">2</a></li>
                <li><a href="http://localhost:3000/posts?page=3&limit=2">3</a></li>
                <li>
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">»</span>
                    </a>
                </li>
            </ul>
        </div>

【问题讨论】：

标签： javascript node.js pagination ejs

【解决方案1】：

您可以考虑发送总共有多少页的信息。比如这样：

const allResults = await model.find().exec()
res.totalPages = Math.ceil(allResults.length / limit)

...

res.render("posts/index", {totalPages: res.totalPages, posts: res.paginatedResults, limit: 2})

然后在 ejs 文件中，您可以从一个空的 <ul class="pagination"> 标记开始，您将使用此脚本注入该标记。

<script>
        function generateUrl(page, limit) {
            return `http://localhost:3000/posts?page=${page}&limit=${limit}`
        }

        function injectPagination() {
            // get current page & total pages
            const urlParams = new URLSearchParams(window.location.search)
            const page = +urlParams.get("page")
            const totalPages = +('<%- JSON.stringify(totalPages) %>')
            
            // get the pagination ul
            const ul = document.getElementsByClassName('pagination')[0]
            
            // handle link to page - 2
            let previous = page <= 2 ? false : true
            let previousList = ''
    
            if (previous) {
                previousList = `
                <li>
                    <a href="${generateUrl(page-2, 2)}" aria-label="Previous">
                        <span aria-hidden="true">«</span>
                    </a>
                </li>
                `
            }

            // handle link to page + 2
            let next = page + 1 >= totalPages ? false : true
            let nextList = ''
    
            if (next) {
                nextList = `
                <li>
                    <a href="${generateUrl(page+2, 2)}" aria-label="Previous">
                        <span aria-hidden="true">«</span>
                    </a>
                </li>
                `
            }

            // handle link to page - 1
            let beforePageActive = page - 1 < 1 ? false : true
            let beforePageActiveList = ''
            
            if(beforePageActive) {
                beforePageActiveList += `<li><a href="${generateUrl(page-1, 2)}">${page-1}</a></li>`
            }

            // handle link to page + 1
            let afterPageActive = page + 1 > totalPages ? false : true
            let afterPageActiveList = ''
            
            if(afterPageActive) {
                afterPageActiveList += `<li><a href="${generateUrl(page+1, 2)}">${page+1}</a></li>`
            }

            // handle active page
            const pageActiveList = `<li class="active"><a href="${generateUrl(page, 2)}">[${page}]</a></li>`

            ul.innerHTML = previousList + beforePageActiveList + pageActiveList + afterPageActiveList + nextList
        }

        injectPagination()
    </script>

【讨论】：