Confused on HTML for Mongo/Mongoose pagination - forms

Question

I currently have a collection with about 4,000 documents. I want to be able to paginate the results so users can only view 100 at a time.
I pretty much understand what to do on the server side when the search is submitted:
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);
})
})
});
Now, on my view page this is what I have and where I think I am going about something quite wrong:
//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;">Next 100 →</p>
</div>
</div>
</section>
</div>
</div>
//footer here
Thanks for any help! I'm really new at this and appreciate it.

Answer 1

There's a few things I'd suggest:
Use app.get() instead of app.post(). You're retrieving information from the server and the app.get() method represents a HTTP GET, which in turn represents retrieval. The app.post() method as you know represents a HTTP POST, which should be used for adding information to the server.
Once you use app.get() you can represent the pages on the client as simple links to /browse/:page
Be mindful of edge cases where page=0, page=last. You probably don't want to show a link to previous when there's no previous page.
Using skip() has performance penalties when you skip over large number of documents. Just something to keep in mind.
Server:
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});
});
})
Client (using ejs as in your example):
// list data
<ul>
<% for(var i=0; i<results.length; i++) {%>
<li><%= results[i]._id %></li>
<% } %>
</ul>
// show prev/next page links
previous
next
Hope that helps.