Paging

페이징

 

게시글이 여러개일 경우 ex) 999 > 999개 중 10개만 잘라서 server에서 불러와야 한다 

server에서 DB로 요청을 할 때 10개만 따로 불러오도록 요청을 보내야 DB에선 게시글 10개만큼의 데이터만 가져 올 수 있기 때문에 부하가 적어진다.

 

10개만큼의 데이터를 가져오는 방법은

LIMIT를 활용해서 불러 올러올 수 있다

SELECT * FROM board order by idx desc LIMIT ${start}, ${views}

start 지점에 시작점을 지정하고 views에 불러올 갯수만큼을 넣어준다.

order by idx desc 의 경우 DB에 마지막에 저장된 순서대로 불러온다 ex) 0~ 100 이 있다면 90~100 만 불러오게 된다.

 

이렇게 10개의 게시글을 불러오게 되면 query에서 받은번호(PageNum)에 맞는 게시글들만 보이게 할 수 있다.

 

createPageBtn = async (pageNum) => {
    const totalboard = await repository.total();
    const viewlist = 10;
    const viewpagebtn = 5;
    const totalpage = Math.ceil(totalboard / viewlist);
    const count = Math.ceil(pageNum / viewpagebtn) - 1;

    let clicklimit = Math.floor(totalpage / viewpagebtn);
    let pagearr = [];

    for (let i = 0; i <= clicklimit; i++) {
        pagearr.push([]);
        for (let j = 1; j <= totalpage; j++) {
            if (Math.ceil(j / viewpagebtn) - 1 === i) pagearr[i].push(j);
        }
        //for (let j = 1; j < 6; j++) {
        //    let k = j + i * 5;
        //    if (k <= totalpage) pagearr[i].push(k);
        //}
    }

    const pagebtn = { a: pagearr[count][0], b: pagearr[count][1], c: pagearr[count][2], d: pagearr[count][3], e: pagearr[count][4] };
    return pagebtn;
};

totalboard = 

`SELECT COUNT(*) FROM board` 

를 이용해 가지고 온 총 게시글의 갯수이다.

viewlist = 한 페이지에 보여주고 싶은 게시글 수

viewpagebtn = 한 페이지에 보여주고 싶은 페이지의 버튼 수

 

totalboard 와 viewlist를 통해 총 page 수 = 총 btn 갯수,

총 page와 viewpagebtn 을 이용해 총 btn 배열의 수를 가지고 온다.

배열이 생성 될 갯수는 총 btn의 갯수 / viewpagebtn

 

totalboard = 249  viewlist = 10  // 총 페이지,총 btn 수 = 24.9 >> 올림  >> 25

총 page = 25 viewpagebtn = 5  // 총 btn 배열의 수 = 5 >> clicklimit 

배열 하나를 만들고  그 안에 배열을 생성해서(clicklimt 만큼)

[1,2,3,4,5], [6,7,8,9,10] 을 담아야한다.

총 btn 갯수를 돌려서  / 5 를 했을 때

0이면 배열[0]  1이면 배열[1] 에 추가해주는 방법과

1~5까지 돌릴 때 j + i * 5를 통해 담아주는 방법도 있다.

 

결과물 

[
  [ 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 ],
]

 

이 결과물을 가지고 list에서 query 값으로 받은 Pagenum를 통해 count를 계산한다.

const count = Math.floor(pageNum / viewpagebtn);

ex) pagenum = 1 > count = 0

 

count 번호를 이용해서 리턴값을 보내준다. >> 객체형태로 담아서 보내준다 

 

const query = window.location.search;
const totalboard = totalboards.innerHTML.split(":")[1];

const viewlist = 10;
const viewpagebtn = 5;
const totalpage = Math.ceil(totalboard / viewlist);

const clicklimit = Math.ceil(totalpage / viewpagebtn);
let count = Math.ceil(pagenumber / viewpagebtn);

let pagearr = [];

prebtn.addEventListener("click", async (e) => {
    --count;
    if (count === 0) {
        e.preventDefault();
        alert("맨앞페이지 입니다.");
        return (count = 1);
    } else {
        window.location.href = `http://localhost:3000/board/list?pageNum=${1 + 5 * (count - 1)}`;
    }
});

next.addEventListener("click", async (e) => {
    ++count;
    if (count > clicklimit) {
        e.preventDefault();
        alert("맨뒷페이지 입니다.");
        return (count = clicklimit);
    } else {
        window.location.href = `http://localhost:3000/board/list?pageNum=${1 + 5 * (count - 1)}`;
    }
});

 paging 버튼 js