임태민

Create post paging function

post 목록의 paging 기능을 추가하였습니다.
...@@ -6,13 +6,28 @@ var util = require('../util'); ...@@ -6,13 +6,28 @@ var util = require('../util');
6 6
7 7
8 // Post home 8 // Post home
9 -router.get('/', function(req, res){ 9 +router.get('/', async function(req, res){
10 - Post.find({}) 10 + // Paging 기능 추가
11 - .populate('author') 11 + var page = Math.max(1, parseInt(req.query.page));
12 - .sort('-createdAt') 12 + var limit = Math.max(1, parseInt(req.query.limit));
13 - .exec(function(err, posts){ 13 + page = !isNaN(page)?page:1;
14 - if(err){return res.json(err)}; 14 + limit = !isNaN(limit)?limit:10;
15 - res.render('posts/index', {posts:posts}); 15 +
16 + var skip = (page-1)*limit;
17 + var count = await Post.countDocuments({});
18 + var maxPage = Math.ceil(count/limit);
19 + var posts = await Post.find({})
20 + .populate('author')
21 + .sort('-createdAt')
22 + .skip(skip)
23 + .limit(limit)
24 + .exec();
25 +
26 + res.render('posts/index', {
27 + posts:posts,
28 + currentPage:page,
29 + maxPage:maxPage,
30 + limit:limit
16 }); 31 });
17 }); 32 });
18 33
......
...@@ -47,15 +47,31 @@ ...@@ -47,15 +47,31 @@
47 </tr> 47 </tr>
48 <% }) %> 48 <% }) %>
49 </tbody> 49 </tbody>
50 -
51 </table> 50 </table>
52 51
52 + <nav class="nav justify-content-center bg-light">
53 + <%
54 + var offset = 2;
55 + var previousBtnEnabled = currentPage>1;
56 + var nextBtnEnabled = currentPage<maxPage;
57 + %>
58 + <ul class="pagination pagination-sm justify-content-center align-items-center h-100 mb-0">
59 + <li class="page-item <%= previousBtnEnabled?'':'disabled' %>">
60 + <a class="page-link" href="/posts?page=<%= currentPage-1 %>&limit=<%= limit %>"<%= previousBtnEnabled?'':'tabindex=-1' %></a>
61 + </li>
62 + <% for(i=1;i<=maxPage;i++){ %>
63 + <% if(i==1 || i==maxPage || (i>=currentPage-offset && i<=currentPage+offset)){ %>
64 + <li class="page-item <%= currentPage==i?'active':'' %>"><a class="page-link" href="/posts?page=<%= i %>&limit=<%= limit %>"><%= i %></a></li>
65 + <% } else if(i==2 || i==maxPage-1){ %>
66 + <li><a class="page-link">...</a></li>
67 + <% } %>
68 + <% } %>
69 + <li class="page-item <%= nextBtnEnabled?'':'disabled' %>">
70 + <a class="page-link" href="/posts?page=<%= currentPage+1 %>&limit=<%= limit %>"<%= nextBtnEnabled?'':'tabindex=-1' %></a>
71 + </li>
72 + </ul>
73 + </nav>
53 </div> 74 </div>
54 -
55 -
56 -
57 -
58 -
59 </div> 75 </div>
60 </body> 76 </body>
61 </html> 77 </html>
...\ No newline at end of file ...\ No newline at end of file
......