对 Mongo/Mongoose 分页的 HTML 感到困惑答案

【问题标题】：Confused on HTML for Mongo/Mongoose pagination对 Mongo/Mongoose 分页的 HTML 感到困惑
【发布时间】：2014-03-19 22:15:00
【问题描述】：

我目前有一个包含大约 4,000 个文档的集合。我希望能够对结果进行分页，这样用户一次只能查看 100 个。

我非常了解提交搜索时服务器端要做什么：

app.post('/browse/:page', function(req, res) {
    var page = parseInt(req.params.page);
    data = {};
    data.page = page;
    data.nextpage = page + 1;
    data.prevpage = page - 1;

    var filterOptions = _.transform(req.body, function(result, value, key) {
        result[key] = new RegExp(value.replace(/[^A-Za-z 0-9!'-]/g,''), "i");
    });

    Model.find(filterOptions).sort('brand').skip((page-1)*100).limit(100).exec(function(err, results) {
        //do stuff here with results
        res.render('browse.ejs', data);
    })
})

});

现在，在我的视图页面上，这就是我所拥有的，并且我认为我正在做一些非常错误的事情：

//header here

<div class="wrapper row2">
    <div id="container" class="clear">
    <section>
        <div id="browse-wrap">
            <div id="browse-left_col">
                <h3>Browse by:</h3><br>
                <form action="browse/1" method="post">
                    //form inputs and such here
                    <input type="submit" class="button" value="Browse">
                </form>
            </div>
            <div id="browse-right_col">
                //table of results here
                <p style="text-align:right;"><a href="#" onclick="document.forms[0].attr('action', 'browse/<%=nextpage%>').submit();return false;">Next 100 &#8594;</a></p>
            </div>
        </div>
    </section>
    </div>
</div>

//footer here

感谢您的帮助！我真的很陌生，很感激。

【问题讨论】：

标签： forms express pagination mongoose

【解决方案1】：

我有几点建议：

使用 app.get() 代替 app.post()。您正在从服务器检索信息，app.get() 方法代表一个 HTTP GET，而后者又代表检索。如您所知，app.post() 方法代表一个 HTTP POST，应该用于向服务器添加信息。
使用 app.get() 后，您可以将客户端上的页面表示为指向 /browse/:page 的简单链接
注意页面=0，页面=最后的边缘情况。当没有上一页时，您可能不想显示指向上一页的链接。
跳过大量文档时，使用 skip() 会降低性能。只是需要记住的一点。

服务器：

app.get('/browse/:page', function(req, res) {
        ...
        Model.find().sort('brand').skip((page-1)*100).limit(100).exec(function(err, results) {
           res.render('browse.ejs', {data:data, results:results});
        });
})

客户端（在您的示例中使用 ejs）：

// list data
<ul>
<% for(var i=0; i<results.length; i++) {%>
   <li><%= results[i]._id %></li>
<% } %>
</ul>
// show prev/next page links
<a href="/browse/<%= data.prevPage%>">previous</a>
<a href="/browse/<%= data.nextPage%>">next</a>

希望对您有所帮助。

【讨论】：