Express에서 쿼리스트링을 이용한 페이징 구현 해보기
2018-06-24 15:38:25

db는 mysql, view 영역은 ejs로 간단하게 쿼리스트링을 이용한 페이징 구현을 정리 한다.

서버

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58

const express = require('express');
const mysql = require('mysql2');

const app = express();
const PORT = process.env.PORT || 3000;
app.set('views', `${__dirname}/views`);
app.set('view engine', 'ejs');

const connection = mysql.createConnection({ // NOTE: mysql connection
host: 'localhost',
user: 'root',
database: 'paging_test',
});

app.get('/', (req, res) => {
const pageNum = Number(req.query.pageNum) || 1; // NOTE: 쿼리스트링으로 받을 페이지 번호 값, 기본값은 1
const contentSize = 10; // NOTE: 페이지에서 보여줄 컨텐츠 수.
const pnSize = 10; // NOTE: 페이지네이션 개수 설정.
const skipSize = (pageNum - 1) * contentSize; // NOTE: 다음 페이지 갈 때 건너뛸 리스트 개수.

connection.query('SELECT count(*) as `count` FROM `articles`', (countQueryErr, countQueryResult) => {
if (countQueryErr) throw countQueryErr;
const totalCount = Number(countQueryResult[0].count); // NOTE: 전체 글 개수.
const pnTotal = Math.ceil(totalCount / contentSize); // NOTE: 페이지네이션의 전체 카운트
const pnStart = ((Math.ceil(pageNum / pnSize) - 1) * pnSize) + 1; // NOTE: 현재 페이지의 페이지네이션 시작 번호.
let pnEnd = (pnStart + pnSize) - 1; // NOTE: 현재 페이지의 페이지네이션 끝 번호.
connection.query('SELECT * FROM `articles` ORDER BY id DESC LIMIT ?, ?', [skipSize, contentSize], (contentQueryErr, contentQueryResult) => {
if (contentQueryErr) throw contentQueryErr;
if (pnEnd > pnTotal) pnEnd = pnTotal; // NOTE: 페이지네이션의 끝 번호가 페이지네이션 전체 카운트보다 높을 경우.
const result = {
pageNum,
pnStart,
pnEnd,
pnTotal,
contents: contentQueryResult,
};
res.render('index', {
articles: result,
});
});
});
});

app.get('/view/:id', (req, res) => {
const { id } = req.params;
connection.query('SELECT * FROM `articles` WHERE id = ?', [id], (err, results) => {
if (err) throw err;
res.render('view', {
article: results[0],
});
});
});


app.listen(PORT, () => {
console.log(`express is running on port ${PORT}`);
});

클라이언트

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<!doctype html>
<html lang="ko">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>nodejs-paging-example</title>
<link href='https://fonts.googleapis.com/css?family=Audiowide|Iceland|Monoton|Pacifico|Press+Start+2P|Vampiro+One'
rel='stylesheet'>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>

<body>
<div class="container">
<div class="row">
<table class="bordered">
<thead>
<tr>
<th>제목</th>
<th></th>
</tr>
</thead>
<tbody>
<% if (articles.contents.length != 0) { %>
<% articles.contents.forEach(function(Article){ %>
<tr>
<td><a href="/view/<%=Article.id%>"><%=Article.title%></a></td>
<td><a href="/view/<%=Article.id%>"><%=Article.text%></a></td>
</tr>
<% }); %>
<% } else { %>
<tr>
<td>등록된 글이 없습니다.</td>
</tr>
<% } %>
</tbody>
</table>
</div>
</div>

<% if (articles.contents.length != 0) { %>
<div class="" style="text-align:center;">
<ul class="pagination">
<li <%if(articles.pageNum == 1){%> class="disabled" <%}else{%>class="waves-effect" <%}%> >
<a <%if(articles.pageNum > 1){%> href="?pageNum=<%=articles.pageNum-1%>" <%}%>>
<i class="material-icons">chevron_left</i>
</a>
</li>
<% for(var i=articles.pnStart; i<=articles.pnEnd; i++){ %> <li <%if(i===articles.pageNum){%> class="active"
<%}%>><a href="?pageNum=<%=i%>"><%=i%></a></li>
<% } %>
<li <%if(articles.pageNum == articles.pnTotal){%> class="disabled" <%}else{%> class="waves-effect" <%}%>>
<a <%if(articles.pageNum < articles.pnTotal){%> href="?pageNum=<%=articles.pageNum+1%>" <%}%> class="waves-effect">
<i class="material-icons">chevron_right</i>
</a>
</li>
</ul>
</div>
<% } %>
</body> </html>

스크롤 페이징이나 ajax로 페이징을 구현을 하는 건 서버는 거의 똑같고 클라이언트만 바꾸면 됨.

참고