IT/development

[WebDevelopment]pagination

์•Œ ์ˆ˜ ์—†๋Š” ์‚ฌ์šฉ์ž 2022. 11. 27.

๋ชฉ์ฐจ

    pagination

    ์ด๊ฑด ์Šคํ”„๋ง์—๋งŒ ๊ตญํ•œ๋œ ๊ธฐ์ˆ ์€ ์•„๋‹ˆ๊ณ  ์›น ์ „๋ฐ˜์ ์œผ๋กœ ์“ฐ์ด๋Š” ๊ธฐ์ˆ ์ž„
    ํ™”๋ฉด์— ํŽ˜์ด์ง€๋„ค์ด์…˜ ์ฒ˜๋ฆฌ๋ฅผ ํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” ์šฐ์„ ์ ์œผ๋กœ ํฌ๊ฒŒ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ •๋ณด๋“ค์ด ํ•„์š”ํ•จ

    • ํ˜„์žฌ ํŽ˜์ด์ง€ ๋ฒˆํ˜ธ(page)
    • ์ด์ „๊ณผ ๋‹ค์Œ์œผ๋กœ ์ด๋™ ๊ฐ€๋Šฅํ•œ ๋งํฌ์˜ ํ‘œ์‹œ ์—ฌ๋ถ€(prev, next)
    • ํ™”๋ฉด์—์„œ ๋ณด์—ฌ์ง€๋Š” ํŽ˜์ด์ง€์˜ ์‹œ์ž‘ ๋ฒˆํ˜ธ์™€ ๋ ๋ฒˆํ˜ธ(startPage, endPage)

    ์˜ค๋ผํด์„ ๊ธฐ์ค€์œผ๋กœ ์„ค๋ช…

    1.์ธ๋ผ์ธ๋ทฐ์—์„œ rownum์ด ํžŒํŠธ๋ฅผ ์ด์šฉํ•ด์„œ DESC ์ •๋ ฌ๋กœ 1๋ฒˆ ~ 20๋ฒˆ๊นŒ์ง€ ๋ฐ์ดํ„ฐ๋ฅผ ๊ตฌํ•จ

    2.๋ฐ”๊นฅ์ชฝ SELECT๋ฌธ์—์„œ ์ธ๋ผ์ธ๋ทฐ์—์„œ ๋‚˜์˜จ 1 ~ 20๋ฒˆ๊นŒ์ง€์˜ ๋ฐ์ดํ„ฐ ์ค‘ ์กฐ๊ฑด์ด rn์ด 10๋ณด๋‹ค ํฐ ๋ฐ์ดํ„ฐ๋งŒ ๊ตฌํ•จ(์ธ๋ผ์ธ๋ทฐ์˜ ๊ฒฐ๊ณผ์ค‘ 11๋ฒˆ๋ถ€ํ„ฐ 20๋ฒˆ๊นŒ์ง€์˜ ๋ฐ์ดํ„ฐ๋งŒ ์กฐํšŒ๋จ
    (BNO:10589495 ~ BNO:10589486์˜ ๋ฐ์ดํ„ฐ์— ํ•ด๋‹น๋จ)ํ™”๋ฉด์—์„œ 2ํŽ˜์ด์ง€์— ํ•ด๋‹น๋˜๋Š” ๋ฐ์ดํ„ฐ์ž„)

    ์ด๋ฅผ mybatis์—์„œ ์ฟผ๋ฆฌ๋กœ ํ•˜๋ฉด ์•„๋ž˜์™€ ๊ฐ™์Œ

     

    pagination์„ ์œ„ํ•œ ๊ณต์‹

    ํŽ˜์ด์ง•์˜ ๋๋ฒˆํ˜ธ(endPage)๊ณ„์‚ฐ ๊ณต์‹
    ํ•œํŽ˜์ด์ง€์— ๋ณด์—ฌ์ค„ ๊ฒŒ์‹œ๊ธ€์˜ ๊ฐฏ์ˆ˜๋Š” 10๊ฐœ๋ผ๊ณ  ๊ฐ€์ •

    ๋ํŽ˜์ด์ง€(endPage)๋Š” ์ „์ฒด ๋ฐ์ดํ„ฐ์ˆ˜(total)์— ์˜ํ•ด ์˜ํ–ฅ์„ ๋ฐ›์Œ, ์˜ˆ๋ฅผ ๋“ค์–ด 10๊ฐœ์”ฉ ๋ณด์—ฌ์ฃผ๋Š” ๊ฒฝ์šฐ ์ „์ฒด ๋ฐ์ดํ„ฐ ์ˆ˜๊ฐ€ 80๊ฐœ๋ผ๊ณ  ๊ฐ€์ •ํ•˜๋ฉด ๋๋ฒˆํ˜ธ๋Š” 10์ด ์•„๋‹Œ 8์ด ๋˜์–ด์•ผ ํ•จ
    ๊ทธ๋Ÿฌ๋ฏ€๋กœ ๋๋ฒˆํ˜ธ(endPage)์™€ ํ•œํŽ˜์ด์ง€๋‹น ์ถœ๋ ฅ๋˜๋Š” ๋ฐ์ดํ„ฐ์˜ ์ˆ˜(amount)์˜ ๊ณฑ์ด ์ „์ฒด๋ฐ์ดํ„ฐ ์ˆ˜๋ณด๋‹ค ํฌ๋‹ค๋ฉด ๋๋ฒˆํ˜ธ๋Š” ๋‹ค์‹œ ์ „์ฒด ๋ฐ์ดํ„ฐ๋ฅผ ์ด์šฉํ•ด ๋‹ค์‹œ ๊ณ„์‚ฐ๋˜์–ด์•ผ ํ•จ
    ๋จผ์ € ์ „์ฒด ๋ฐ์ดํ„ฐ ์ˆ˜(total)๋ฅผ ์ด์šฉํ•ด์„œ ์‹ค์ œ ๋ ํŽ˜์ด์ง€(realEnd)๊ฐ€ ๋ช‡ ๋ฒˆ๊นŒ์ง€ ๋˜๋Š”์ง€๋ฅผ ๊ณ„์‚ฐํ•œ ๋’ค ๋งŒ์ผ ์‹ค์ œ ๋ ํŽ˜์ด์ง€๊ฐ€ ๊ตฌํ•ด๋‘” ๋๋ฒˆํ˜ธ๋ณด๋‹ค ์ž‘๋‹ค๋ฉด
    ์‹ค์ œ ๋ํŽ˜์ด์ง€๊ฐ’์„ ๋ํŽ˜์ด์ง€๊ฐ’์— ๋Œ€์ž…ํ•ด์•ผ ํ•จ
    ์ด์ „(prev)์˜ ๊ฒฝ์šฐ๋Š” ์‹œ์ž‘๋ฒˆํ˜ธ(startPage)๊ฐ€ 1๋ณด๋‹ค ํฐ ๊ฒฝ์šฐ๋ผ๋ฉด ์กด์žฌํ•˜๋ฉด ๋จ, ์‹œ์ž‘๋ฒˆํ˜ธ๊ฐ€ 1๋ณด๋‹ค ํฐ ๊ฒฝ์šฐ๋ผ๋ฉด ์‹œ์ž‘๋ฒˆํ˜ธ๊ฐ€ 11์ธ ๊ฒฝ์šฐ๋ถ€ํ„ฐ ํ•ด๋‹น๋จ
    ๋‹ค์Œ(next)์˜ ๊ฒฝ์šฐ๋Š” ์‹ค์ œ ๋๋ฒˆํ˜ธ(realEnd)๊ฐ€ ๋๋ฒˆํ˜ธ(endPage)๋ณด๋‹ค ํฐ ๊ฒฝ์šฐ์—๋งŒ ์กด์žฌํ•˜๋ฉด ๋จ
    ์œ„์™€ ๊ฐ™์ด back๋‹จ(java)์—์„œ ๊ตฌํ•œ ๋ฐ์ดํ„ฐ๋ฅผ ๊ฐ€์ง€๊ณ  controller์—์„œ model์— ๋‹ด์€ ๋’ค ํ™”๋ฉด๋‹จ(jsp)์œผ๋กœ ๋ณด๋‚ธ ํ›„ ํ™”๋ฉด๋‹จ์—์„œ ํ•ด๋‹น ๋ฐ์ดํ„ฐ๋ฅผ ํ‘œ์‹œํ•ด์ฃผ๋ฉด ๋จ

    ์ถœ์ฒ˜: ์ฝ”๋“œ๋กœ ๋ฐฐ์šฐ๋Š” ์Šคํ”„๋ง ์›น ํ”„๋กœ์ ํŠธ(๊ฐœ์ •ํŒ)

     

    ๋Œ“๊ธ€