[FrontEnd][Vue-PJ] ๊ฐœ๋ฐœ์ž ์ปค๋ฎค๋‹ˆํ‹ฐ ์„œ๋น„์Šค - Paging ์ฒ˜๋ฆฌ

2022. 3. 20. 08:00ใ†Programming Project ์ž‘์—…์‹ค/๋‚ด์šฉ ์ •๋ฆฌ

728x90
๋ฐ˜์‘ํ˜•

 

 

๐Ÿง‘๐Ÿป‍๐Ÿ’ป Git Hub ์ฃผ์†Œ

 

 

 

๐Ÿ—‚ ๋ชฉ์ฐจ

โ— [FrontEnd][Vue-PJ] ๊ฐœ๋ฐœ์ž ์ปค๋ฎค๋‹ˆํ‹ฐ ์„œ๋น„์Šค - Home / Main

โ— [FrontEnd][Vue-PJ] ๊ฐœ๋ฐœ์ž ์ปค๋ฎค๋‹ˆํ‹ฐ ์„œ๋น„์Šค - ๊ฒŒ์‹œํŒ ๋งŒ๋“ค๊ธฐ : ๋ชฉ๋ก ์กฐํšŒ

โ— [FrontEnd][Vue-PJ] ๊ฐœ๋ฐœ์ž ์ปค๋ฎค๋‹ˆํ‹ฐ ์„œ๋น„์Šค - ๊ฒŒ์‹œํŒ ๋งŒ๋“ค๊ธฐ : ์ƒ์„ธ ์กฐํšŒ

โ— [FrontEnd][Vue-PJ] ๊ฐœ๋ฐœ์ž ์ปค๋ฎค๋‹ˆํ‹ฐ ์„œ๋น„์Šค - ๊ฒŒ์‹œํŒ ๋งŒ๋“ค๊ธฐ : ๋“ฑ๋ก / ์ˆ˜์ •

โ— [FrontEnd][Vue-PJ] ๊ฐœ๋ฐœ์ž ์ปค๋ฎค๋‹ˆํ‹ฐ ์„œ๋น„์Šค - ๊ฒŒ์‹œํŒ ๋งŒ๋“ค๊ธฐ : ์‚ญ์ œ

โ— [FrontEnd][Vue-PJ] ๊ฐœ๋ฐœ์ž ์ปค๋ฎค๋‹ˆํ‹ฐ ์„œ๋น„์Šค - ๊ฒŒ์‹œํŒ ๋งŒ๋“ค๊ธฐ : ๋‹ต๋ณ€ ๋“ฑ๋ก / ์ˆ˜์ •

โ— [FrontEnd][Vue-PJ] ๊ฐœ๋ฐœ์ž ์ปค๋ฎค๋‹ˆํ‹ฐ ์„œ๋น„์Šค - ๊ฒŒ์‹œํŒ ๋งŒ๋“ค๊ธฐ : ๋‹ต๋ณ€ ์‚ญ์ œ

 

๐Ÿ‘จ‍๐Ÿ‘ฉ‍๐Ÿ‘ง‍๐Ÿ‘ฆ ํšŒ์› ๊ด€๋ จ

โ— [FrontEnd][Vue-PJ] ๊ฐœ๋ฐœ์ž ์ปค๋ฎค๋‹ˆํ‹ฐ ์„œ๋น„์Šค - ํšŒ์› ๊ด€๋ จ : ํšŒ์› ๊ฐ€์ž…



 

- ๋ถ€ ๋ก -

[Vue.js] axios ์„ค์น˜

[FrontEnd] html Tag ์ •๋ฆฌ

[CSS] CSS ์ •๋ฆฌ

[FrontEnd][Vue-PJ] ๊ฐœ๋ฐœ์ž ์ปค๋ฎค๋‹ˆํ‹ฐ ์„œ๋น„์Šค - Paging ์ฒ˜๋ฆฌ

[Vue.js] ๊ธฐ์ดˆ ๊ฐœ๋… ์ •๋ฆฌ - Vue Router

 

 

 

 

 

 

 

 

 

 

๐Ÿš€ ๊ฒŒ์‹œํŒ ๋งŒ๋“ค๊ธฐ - Paging ์ฒ˜๋ฆฌ

 

Paging ์ฒ˜๋ฆฌ

 

<!-- Paging ์ฒ˜๋ฆฌ ๊ด€๋ จ Component -->
<template>
  <div class="tPages">

    <ul>
      <li class="prev02">
        <a href="javascript:;" @click="firstPage">
          <img :src="require(`@/assets/images/btn_first.png`)">
        </a>
      </li>

      <li class="prev">
        <a href="javascript:;" @click="prevPage">
          <img :src="require(`@/assets/images/btn_prev.png`)">
        </a>
      </li>

      <li v-for="i in range(startPage, endPage)" v-bind:key="i" :class="classActive(i)">
        <a href="javascript:;" @click="setPage(i)">
          <template v-if="i !== nowPage" style="cursor: pointer;">{{ i }}</template>

          <template v-else-if="i === nowPage">{{ i }}</template>
        </a>
      </li>

      <li class="next">
        <a href="javascript:;" @click="nextPage">
          <img :src="require(`@/assets/images/btn_next.png`)">
        </a>
      </li>

      <li class="next02">
        <a href="javascript:;" @click="lastPage">
          <img :src="require(`@/assets/images/btn_last.png`)">
        </a>
      </li>
    </ul>

  </div>  <!-- div class="tPages" ๋ -->
</template>

<script>
import _ from "lodash";

export default {
  name: "Pagination",
  props: {
    totalCount: {
      type: Number,
      default: 0
    }, // totalCount ๋
    rowCount: {
      type: Number,
      default: 10
    }, // rowCount ๋
    pageLimit: {
      type: Number,
      default: 10
    }, // pageLimit ๋
    currPage: {
      type: Number,
      default: 1
    }, // currPage ๋
  }, // props ๋

  data() {
    return {
      startPage: 1,
      nowPage: 1,
      nowPageBlock: 1,
      pervRowCount: 0
    };
  }, // data() ๋

  watch: {
    currPage: "currPageSet"
  }, // watch ๋

  computed: {
    totalPage() {  // ํ•œ Page ๋‹น ๊ฑด ์ˆ˜ ๋ณ€๊ฒฝ ์‹œ 1 Page๋กœ ์„ค์ •
      if (this.rowCount !== this.prevRowCount) {
        this.prevRowCount = this.rowCount;

        // 1Page๋กœ ๋ณ€๊ฒฝ
        this.setFirstPage();
      } // if (this.rowCount != this.prevRowCount) ๋

      console.log("ํŽ˜์ด์ง• ์ฒ˜๋ฆฌ ๋ถ€์—์„œ ์ด ํŽ˜์ด์ง€ ์ˆ˜ : " + this.totalPage + " ๋ฅผ ์•Œ๋ ค ๋“œ๋ฆฝ๋‹ˆ๋‹ค!");

      return _.ceil(this.totalCount / this.rowCount);
    }, // totalPage() ๋

    endPage() { // ํ•œ Page ๋‹น ๊ฑด ์ˆ˜ ๋ณ€๊ฒฝ ์‹œ 1 Page๋กœ ์„ค์ •
      if (this.rowCount !== this.prevRowCount) {
        this.prevRowCount = this.rowCount;
        // 1 Page๋กœ ์„ค์ •
        this.setFirstPage();
      } // if (this.rowCount !== this.prevRowCount) ๋

      const check = this.startPage + this.pageLimit - 1;

      return check <= this.totalPage ? check : this.totalPage;

    } // endPage() ๋
  }, // computed ๋

  methods: {
    range(start, end) {
      return _.range(start, end + 1);
    }, // range(start, end) ๋

    setPage(page) {
      this.nowPage = page;

      this.changePage();
    }, // setPage(page) ๋

    firstPage() {
      // 1 Page๋กœ ์„ค์ •
      this.setFirstPage();

      this.changePage();
    }, // firstPage() ๋

    prevPage() {
      if (this.nowPage > 1) {
        this.nowPage --;
      } // if (this.nowPage > 1) ๋

      if (this.nowPage < this.startPage) {
        this.nowPageBlock --;

        this.startPage = (this.nowPageBlock - 1) * this.pageLimit + 1;
      } // if (this.nowPage < this.startPage) ๋

      this.changePage();

    }, // prevPage() ๋

    nextPage() {
      console.log("ํŽ˜์ด์ง• ์ฒ˜๋ฆฌ ๋ถ€์—์„œ ํ˜„์žฌ Page : " + this.nowPage + " ๋ฅผ ์•Œ๋ ค ๋“œ๋ฆฝ๋‹ˆ๋‹ค!");
      console.log("ํŽ˜์ด์ง• ์ฒ˜๋ฆฌ ๋ถ€์—์„œ ์ด ํŽ˜์ด์ง€ ์ˆ˜ : " + this.totalPage + " ๋ฅผ ์•Œ๋ ค ๋“œ๋ฆฝ๋‹ˆ๋‹ค!");
      console.log("ํŽ˜์ด์ง• ์ฒ˜๋ฆฌ ๋ถ€์—์„œ ๋งˆ์ง€๋ง‰ ํŽ˜์ด์ง€ : " + this.endPage + " ๋ฅผ ์•Œ๋ ค ๋“œ๋ฆฝ๋‹ˆ๋‹ค!");

      if (this.nowPage < this.totalPage) {
        this.nowPage ++;
      } // if (this.nowPage < this.totalPage) ๋

      if (this.nowPage > this.endPage) {
        this.nowPageBlock ++;

        this.startPage = this.nowPage;
      } // if (this.nowPage > this.endPage) ๋

      this.changePage();

    }, // nextPage() ๋

    lastPage() {
      this.nowPage = this.totalPage;
      this.nowPageBlock = _.ceil(this.totalPage / this.pageLimit);
      this.startPage = (this.nowPageBlock - 1) * this.pageLimit + 1;

      this.changePage();
    }, // lastPage() ๋

    changePage() {
      this.$emit("change-page", this.nowPage);
    }, // changePage() ๋

    classActive(i) {
      if (i === this.nowPage) {
        return "active";
      } // if (i === this.nowPage) ๋
    }, // classActive(i) ๋

    setFirstPage() {  // 1 Page๋กœ ์„ค์ •
      this.nowPage = 1;
      this.nowPageBlock = 1;
      this.startPage = 1;
    }, // setFirstPage() ๋

    currPageSet() {
      this.nowPage = this.currPage;

      if (this.nowPage === 1) {
        this.startPage = 1;
      } // if (this.nowPage === 1) ๋
    } // currPageSet() ๋
  } // methods ๋
}; // export default ๋
</script>

 

์œ„์˜ Code๊ฐ€ ๋ฐ”๋กœ Paging์ฒ˜๋ฆฌ๋ฅผ ์œ„ํ•œ Component์ธ Pagination.vue์ธ ๊ฒƒ์ด์—์š”.

 

Panation.vue Paging ์ฒ˜๋ฆฌ ๋ถ€

 

div์™€ ๊ฐ™์€ ํƒœ๊ทธ๋“ค์€ ์ƒ๋žต์„ ํ•˜๊ณ , ์‹ค์ œ์ ์œผ๋กœ ์ค‘์š”ํ•œ ๋‚ด์šฉ๋“ค์— ๋Œ€ํ•ด์„œ ๋ถ„์„์„ ํ•ด๋ณด๋ ค๊ณ  ํ•˜๋Š” ๊ฒƒ์ด์—์š”. ๋จผ์ € ul Tag๋ฅผ ํ†ตํ•ด์„œ ์ˆœ์„œ ์—†๋Š” ๋ชฉ๋ก์„ ๋งŒ๋“ค์–ด ์ค€ ๊ฒƒ์ด์—์š”. ๊ทธ๋Ÿฐ ๋’ค 6~10 ๋ฒˆ์งธ ์ค„๊นŒ์ง€ <li>๋กœ ๊ฐ ํ•ญ๋ชฉ์„ ๋‚˜ํƒ€๋‚ด๋„๋ก ํ•œ ๊ฒƒ์ด์—์š”.

๋จผ์ € <a> Tag๋ฅผ ํ†ตํ•ด href ์†์„ฑ์— javascipt:; ์„ ์ฃผ์—ˆ๋Š”๋ฐ, ์ด๊ฑด `href="#"`๊ณผ ๋™์ผํ•œ ๋‚ด์šฉ์ธ ๊ฒƒ์ด์—์š”. ์ฆ‰, ํด๋ฆญํ•ด๋„ ์•„๋ฌด๊ฒƒ๋„ ํ•˜์ง€ ์•Š๊ฒ ๋‹ค๋Š” ์˜๋ฏธ๋กœ ์‚ฌ์šฉํ•œ ๊ฒƒ์ด์—์š”. ์–ด๋”˜๊ฐ€๋กœ ์ด๋™ํ•˜๊ธฐ ์œ„ํ•ด ์“ฐ๋Š” ๊ฒƒ์ด ์•„๋‹ˆ๋ผ ์–ด๋–ค ์ฒ˜๋ฆฌ๋ฅผ ํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ•œ ๊ฒƒ์ด๊ธฐ ๋•Œ๋ฌธ์— ์ด๋ ‡๊ฒŒ ํ•ด ์ค€ ๊ฒƒ์ด์—์š”.

๊ทธ ๋‹ค์Œ Click Event๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด firstPage()๋ฅผ ํ˜ธ์ถœํ•˜๋„๋ก ํ•ด ์ค€ ๊ฒƒ์ด์—์š”.

 

firstPage()

 

์ด๋ฆ„์ด ์•„์ฃผ ์ง๊ด€์ ์ธ ๊ฒƒ์ด์—์š”.
์ด <a> Tag๋ฅผ ํด๋ฆญํ•˜๊ฒŒ ๋˜๋ฉด ์•„๋ž˜์™€ ๊ฐ™์ด ์ƒ๊ธด Button์„ ํด๋ฆญํ•œ ๊ฒƒ์ธ๋ฐ (Button์€ ์•„๋‹ˆ์ง€๋งŒ, Button์ด๋ผ ์นญํ•จ) ์ด๊ฑด ๋งจ ์•ž Page๋กœ ์ด๋™ํ•˜๋Š” Button์ธ ๊ฒƒ์ด์—์š”.

 

class="prev02"

 

๋จผ์ € ํ•ด๋‹น Method๊ฐ€ ๋™์ž‘ํ•˜๋ฉด setFirstPage()๋ฅผ ํ˜ธ์ถœ ํ•˜๊ฒŒ ๋˜๋Š” ๊ฒƒ์ด์—์š”.

 

setFirstPage()

 

์ตœ์ดˆ ํ•ด๋‹น Method๊ฐ€ ๋™์ž‘ํ•˜๊ฒŒ ๋˜๋ฉด nowPage๋ผ๋Š” Member ๋ณ€์ˆ˜์— ๊ฐ’์ด 1๋กœ ๋ณ€ํ•˜๊ณ , nowPageBlock๋„ 1๋กœ startPage ๋„ ๋ชจ๋‘ 1๋กœ ์ดˆ๊ธฐํ™”๊ฐ€ ๋˜์–ด ๊ฒฐ๊ตญ 1 Page๋กœ ์„ค์ • ๋˜๋„๋ก ํ•ด ์ฃผ๋Š” ๊ฒƒ์ด์—์š”.

 

๊ทธ๋Ÿฐ ๋‹ค์Œ firstPage()๋กœ ๋‹ค์‹œ ๋Œ์•„์™€์„œ ์ด๋ฒˆ์—๋Š” changePage()๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ๊ฒƒ์ด์—์š”.

 

changePage()

 

์ด Method๋Š” this.$emit()์„ ํ˜ธ์ถœํ•˜๋Š”๋ฐ, ์ด๊ฒƒ์€ ๋‹ค๋ฅธ ์ปดํฌ๋„ŒํŠธ์—๊ฒŒ ์ด๋ฒคํŠธ๋ฅผ ์ „๋‹ฌํ•˜๊ธฐ ์œ„ํ•ด ์ด์šฉํ•˜๋Š” ๊ฒƒ์ด์—์š”. ์˜ˆ๋ฅผ ๋“ค์–ด ์ž์‹ ์ปดํฌ๋„ŒํŠธ์—์„œ ๊ฐœ๋ฐœ์ž๊ฐ€ ์ง€์ •ํ•œ ์ด๋ฒคํŠธ๋ฅผ ๋งŒ๋“ค์–ด ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์—๊ฒŒ ์–ด๋–ค Data๋ฅผ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์ด์—์š”. ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ๋Š” ์ž์‹ ์ปดํฌ๋„ŒํŠธ์—์„œ ๋งŒ๋“ค์–ด์ง„ ๊ฐœ๋ฐœ์ž ์ง€์ • Event๋ฅผ ๋ฐ›์•„ `v-on` ์ฆ‰, ํŠน์ • ๋™์ž‘์„ ์ˆ˜ํ–‰ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์ด์—์š”.

๊ทธ๋Ÿผ ์—ฌ๊ธฐ์„œ ๋งํ•˜๋Š” ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ๋Š” ๋ˆ„๊ฐ€ ๋ ๊นŒ์š”?

๋ฐ”๋กœ ๊ฐ ๊ฒŒ์‹œํŒ ํ˜น์€ ํšŒ์› ๊ด€๋ฆฌ ๋“ฑ ๋ชฉ๋ก ์กฐํšŒ๋ฅผ ํ•˜๋Š” ๋ชจ๋“  ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋  ๊ฒƒ์ด์—์š”. ์ง€๊ธˆ์€ Q&A ๊ฒŒ์‹œํŒ์— ๋ชฉ๋ก ์กฐํšŒ๋งŒ ์™„๋ฃŒ๊ฐ€ ๋˜์—ˆ๊ธฐ ๋•Œ๋ฌธ์— ์ด ๋ถ€๋ถ„์„ ํ™•์ธ ํ•ด ๋ณด๋ฉด

 

Q&amp;amp;amp;amp;amp;A ๊ฒŒ์‹œํŒ ๋ชฉ๋ก ์กฐํšŒ - DevInquryList.vue

๋ฐ˜์‘ํ˜•

 

์ด ๊ณณ์— ์œ„์™€ ๊ฐ™์ด Component๊ฐ€ ์„ ์–ธ๋œ ๊ฑธ ๋ณผ ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์ด์—์š”. changePage()์˜ this.$emit์˜ change-page๋Š” ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์— 100๋ฒˆ์งธ ์ค„ @change-page์—๊ฒŒ ๊ฐ’์„ ์ „๋‹ฌํ•ด ์ฃผ๋Š” ๊ฒƒ์ธ๋ฐ, ๊ทธ ๊ฐ’์€ ๋ฐ”๋กœ `this.nowPage` ์ฆ‰ ํ˜„์žฌ ์ด์šฉ์ž๊ฐ€ ์œ„์น˜ํ•œ Page์˜ ์ •์ˆ˜ ๊ฐ’์„ ์ „๋‹ฌ ํ•ด ์ฃผ๊ฒ ๋‹ค๋Š” ๊ฒƒ์ด์—์š”. ๊ทธ๋Ÿผ ์ด๊ฑธ ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ๊ฐ€ ๋ฐ›๊ฒŒ ๋˜๋ฉด changePage()๋ผ๋Š” Method๊ฐ€ ์‹คํ–‰ ๋˜๋Š” ๊ฒƒ์ด์—์š”.

 

 

 

 

 

class="prev"

 

์ด ์นœ๊ตฌ๋Š” ํ•œ Page ์•ž์œผ๋กœ ์ด๋™ํ•˜๋Š” Button์ธ ๊ฒƒ์ด์—์š”.
click Event๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด prevPage()๊ฐ€ ํ˜ธ์ถœ ๋˜๋Š” ๊ฒƒ์ด์—์š”.

 

 

prevPage()

 

์ด Method๊ฐ€ ํ˜ธ์ถœ๋˜๋ฉด ์ผ๋‹จ ๋ฌผ์–ด๋ณด๋Š” ๊ฒƒ์ด์—์š”. "nowPage๊ฐ€ 1๋ณด๋‹ค ํฝ๋‹ˆ๊นŒ?" ์ฆ‰, ํ˜„์žฌ ์ด์šฉ์ž๊ฐ€ ์žˆ๋Š” ์œ„์น˜๊ฐ€ 1 Page ๋ณด๋‹ค ํฐ ๊ณณ์— ์œ„์น˜ํ•ด ์žˆ์–ด์•ผ์ง€ '์ด ์ „์œผ๋กœ ์ด๋™' ์ด๋ผ๋Š” Logic์ด ํ•ฉ๋ฆฌํ™”๊ฐ€ ๋˜๊ธฐ ๋•Œ๋ฌธ์— ๋ฌผ์–ด๋ณด๋Š” ๊ฒƒ์ด์—์š”.

1๋ณด๋‹ค ํฌ๋‹ค๊ณ  ํ•˜๋ฉด this.nowPage --; ์ฆ‰ nowPage์— ๊ฐ’์„ ํ•˜๋‚˜ ๋นผ๊ฒ ๋‹ค๋Š” ์˜๋ฏธ์ธ ๊ฒƒ์ด์—์š”.
๋งŒ์•ฝ ์ด์šฉ์ž๊ฐ€ 5 Page์— ์žˆ๋‹ค๊ฐ€ ์ด ์ „ ์ด๋™ ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๋ฉด 4 Page๋กœ ์ด๋™ํ•˜๊ฒŒ ๋˜๋Š” ๊ฒƒ์ด์—์š”.

 

 

 

 

์ด ์นœ๊ตฌ๋Š” ๋ฒˆํ˜ธ๋ฅผ Click ํ•จ์œผ๋กœ ํ•ด๋‹น Page๋กœ ์ด๋™ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด ์ฃผ๋Š” ๋ฒ„ํŠผ์ธ ๊ฒƒ์ด์—์š”. ์ž๊พธ ๋ฒ„ํŠผ์ด๋ผ๊ณ  ํ•˜์ง€๋งŒ ์—„์—ฐํžˆ ๋”ฐ์ง€๋ฉด button Tag๊ฐ€ ์•„๋‹ˆ๋ผ a Tag๋กœ ๋งŒ๋“ค์–ด ์กŒ๊ธฐ ๋•Œ๋ฌธ์— button์€ ์•„๋‹Œ ๊ฒƒ์ด์—์š”. ๊ทธ๋ ‡๋‹ค๊ณ  link๋ฅผ ํ†ตํ•ด ์ด๋™ํ•˜๋Š” Logic๋„ ์•„๋‹ˆ๋‹ˆ ๊ทธ๋ƒฅ ๋ฒ„ํŠผ์ด๋ผ๊ณ  ํ•˜๋Š” ๊ฒƒ์ด์—์š”.

 

๋จผ์ € v-for๋ฅผ ํ†ตํ•ด rangeํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœ ํ•˜๋Š”๋ฐ, startPage์˜ ๋ณ€์ˆ˜๊ฐ’๊ณผ endPage ๋ณ€์ˆ˜์˜ ๊ฐ’์„ ์ „๋‹ฌํ•ด ์ฃผ๋Š” ๊ฒƒ์ด์—์š”.

 

data()

 

data() ์•ˆ์— Member ๋ณ€์ˆ˜๋“ค์ด ์žˆ๋Š” ๊ฒƒ์ด์—์š”.
์‚ฌ์‹ค ์ด๊ฒŒ Member ๋ณ€์ˆ˜๊ฐ€ ์•„๋‹ˆ๋ผ data Method return์— ์ •์˜๋œ ๊ฐ์ฒด(Object)์ธ๋ฐ, JAVA๋ฅผ ๊ณต๋ถ€ํ•œ ์ฃผ๋‹ˆํ•˜๋ž‘์€ Member ๋ณ€์ˆ˜๋กœ ์ดํ•ดํ•˜๋Š” ๊ฒƒ์ด ํ›จ์”ฌ ์ดํ•ด๊ฐ€ ๋นจ๋ผ์„œ ์ด๋ ‡๊ฒŒ ์ด์•ผ๊ธฐํ•˜๋Š” ๊ฒƒ์ด๋‹ˆ ์ฐฉ์˜ค ์—†๊ธธ ๋ฐ”๋ผ๋Š” ๊ฒƒ์ด์—์š”.

JAVA์—์„œ Class์— Member ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•˜๊ณ , ์ƒ์„ฑ์ž์—์„œ ์ดˆ๊ธฐํ™”๋ฅผ ํ•ด ์ฃผ๋“ฏ ์ด ๊ณณ์—์„œ ์„ ์–ธ๊ณผ ์ดˆ๊ธฐํ™”๋ฅผ ๋ชจ๋‘ ํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์ด์—์š”.

์ง€๊ธˆ ๋ณด๋ฉด startPage๊ฐ€ 1์ด๊ณ , endPage๋Š” ์•„๋ž˜์™€ ๊ฐ™์ด Method๊ฐ€ ํ˜ธ์ถœ ๋˜๋Š” ๊ฒƒ์ด์—์š”.

 

endPage()

 

endPage๊ฐ€ ํ˜ธ์ถœ ๋˜๋ฉด ๋ฌผ์–ด ๋ฝ€๋Š” ๊ฒƒ์ด์—์š”. "rowCount(1 Page์— ์ถœ๋ ฅ๋  ๊ฒŒ์‹œ๊ธ€ ๊ฐœ ์ˆ˜)์˜ ๊ฐ’์ด prevRowCount(์ด ์ „ Page์˜ ์ถœ๋ ฅ๋  ๊ฒŒ์‹œ๊ธ€ ๊ฐœ ์ˆ˜์™€ ๊ฐ™์ง€ ์•Š์Šต๋‹ˆ๊นŒ?" ๋ผ๊ณ  ๋ง์ด์—์š”. ๊ฐ™์ง€ ์•Š๋‹ค๋ฉด ํ˜„์žฌ Page์—์„œ ์ถœ๋ ฅ๋  ๊ฒŒ์‹œ๊ธ€ ๊ฐœ์ˆ˜๋ฅผ ์ด ์ „ Page์— ์ถœ๋ ฅ๋  ๊ฒŒ์‹œ๊ธ€ ๊ฐœ์ˆ˜์— ๋„ฃ์–ด์ฃผ๊ณ , setFirstPage()๋ฅผ ํ˜ธ์ถœ ํ•˜๋Š” ๊ฒƒ์ด์—์š”.

๊ทธ๋Ÿผ ๊ฒฐ๊ตญ 1 Page๋กœ ์ด๋™ํ•˜๊ฒŒ ๋˜๋Š” ํšจ๊ณผ๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ๋Š”๊ฒƒ์ด์—์š”.

 

๊ทธ๋Ÿฐ ๋’ค if๋ฌธ์„ ๋น ์ ธ ๋‚˜์™€ startPage์— pageLismit(ํ•œ Page ๋‹น ๋ณด์—ฌ์ค„ ์ตœ๋Œ€ Data ๊ฐœ์ˆ˜)์— 1์„ ๋บ€ ๊ฐ’์„ check์— ๋„ฃ์–ด ์ฃผ๊ณ , ํ•ด๋‹น check์— this.totalPage ์ฆ‰, ์ด Page ๊ฐœ์ˆ˜ ๊ฐ’ ๋ณด๋‹ค ์ž‘๊ฑฐ๋‚˜ ๊ฐ™์œผ๋ฉด check ๋ณ€์ˆ˜๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ณ , ์•„๋‹ˆ๋ฉด ์ด Page ๊ฐœ์ˆ˜ ๊ฐ’์„ ๋ฐ˜ํ™˜ ํ•ด ์ฃผ๋Š” ๊ฒƒ์ด์—์š”.

 

๊ทธ๋Ÿผ ์ด์ œ startPage์— ๊ฐ’๊ณผ endPage์—์„œ ๋ฐ˜ํ™˜๋œ ๊ฐ’์„ ๊ฐ€์ง€๊ณ , range()๊ฐ€ ํ˜ธ์ถœ์ด ๋˜๊ณ , 

 

range()

 

range()๋Š” lodash ํ˜•์‹์— range()๋ฅผ ์ด์šฉํ•ด์„œ ์‹œ์ž‘ Page๊ฐ’๊ณผ ๋งค๊ฐœ ๋ณ€์ˆ˜๋กœ ๋“ค์–ด์˜จ end Page๊ฐ’์— 1์„ ๋”ํ•œ ๋ฒ”์œ„๋ฅผ ๋ฐ˜ํ™˜ ํ•ด ์ฃผ๋Š” ๊ฒƒ์ด์—์š”.

 

๊ทธ๋Ÿผ ์˜ˆ๋ฅผ ๋“ค์–ด 1 ~ 10์ด๋ผ๋Š” ๋ฒ”์œ„๊ฐ€ ๋งŒ๋“ค์–ด์กŒ๋‹ค๊ณ  ๊ฐ€์ •ํ•  ๋•Œ `Panation.vue Paging ์ฒ˜๋ฆฌ ๋ถ€` ๊ทธ๋ฆผ 18๋ฒˆ์งธ๋กœ ๋Œ์•„์™€์„œ ํ•ด๋‹น ๋ฒ”์œ„๋ฅผ ํ•˜๋‚˜์”ฉ i์— ๋„ฃ์–ด์ฃผ๋ฉด์„œ ๋ฐ˜๋ณต์„ ํ•˜๊ฒŒ ๋˜๊ณ , ํ•ด๋‹น ๋ฐ˜๋ณต์— Unique ๊ฐ’์€ i๋กœ ์„ค์ •์„ ํ•ด ์ค€ ๋’ค classActive()๋ฅผ ํ˜ธ์ถœํ•˜๋Š”๋ฐ, i์˜ ๊ฐ’์„ ๋„ฃ์–ด์ฃผ๋ฉด์„œ ๊ณ„์† ๋ฐ˜๋ณตํ•˜๋Š” ๊ฒƒ์ด์—์š”.

 

classActive()

 

์ด ์นœ๊ตฌ๋Š” ๋˜ ๋“ค์–ด์˜ค๋ฉด ๋ฌผ์–ด๋ณด๋Š” ๊ฒƒ์ด์—์š”. "i๊ฐ€ ์ด์šฉ์ž๊ฐ€ ์œ„์น˜ํ•œ ํ˜„์žฌ Page (this.nowPage)์™€ ๊ฐ™๋‚˜์š”?" ๋ฌผ์–ด๋ณด๊ณ , ๋งž๋‹ค๋ฉด "active"์„ ๋ฐ˜ํ™˜ํ•ด ์ฃผ๊ฒŒ ๋˜์–ด ์žˆ๋Š” ๊ฒƒ์ด์—์š”. 

๊ทธ๋ ‡๊ฒŒ 1 ~ N๋ฒˆ๊นŒ์ง€์˜ ๋ฒˆํ˜ธ ์ˆœ์— ๋ชฉ๋ก์„ ๋งŒ๋“ค์–ด์ฃผ๊ณ , ๊ทธ ์•ˆ์— <a>๋ฅผ ์ด์šฉํ•ด์„œ Click Event๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด i ๊ฐ’์„ ๊ฐ€์ง€๊ณ  setPage() ๊ฐ€ ํ˜ธ์ถœ ๋˜๊ฒŒ ํ•œ ๊ฒƒ์ด์—์š”.

 

 

ํ•ด๋‹น ๋ฒˆํ˜ธ๋ฅผ ๋ˆŒ๋ €๋‹ค๋Š” ๊ฒƒ์€ ์ด์šฉ์ž๊ฐ€ ํ•ด๋‹น Page๋กœ ์ด๋™ํ•˜๊ฒ ๋‹ค๋Š” ์˜๋ฏธ์ธ ๊ฒƒ์ด์—์š”. ๊ทธ ์ฒ˜๋ฆฌ๋ฅผ setPage()๊ฐ€ ํ•ด ์ฃผ๋Š” ๊ฒƒ์ด์—์š”.

์ด์šฉ์ž๊ฐ€ ๋ˆ„๋ฅธ Page ๋ฒˆํ˜ธ๊ฐ€ ๋งค๊ฐœ ๋ณ€์ˆ˜๋กœ ๋“ค์–ด์˜ฌ ๊ฒƒ์ด๊ณ , Member ๋ณ€์ˆ˜ (Data()์— ์ •์˜ ๋œ nowPage Object)์— ๊ฐ’์„ ๋งค๊ฐœ ๋ณ€์ˆ˜ ๊ฐ’์œผ๋กœ ๋ฐ”๊ฟ”์ฃผ๊ณ , changePage()๋ฅผ ํ˜ธ์ถœ ํ•˜๋Š” ๊ฒƒ์ด์—์š”.

 

๊ทธ๋Ÿผ ์ด์šฉ์ž๊ฐ€ ์›ํ•˜๋Š” Page๋กœ ์ด๋™์ด ๋  ๊ฒƒ์ด์—์š”.

 

`Panation.vue Paging ์ฒ˜๋ฆฌ ๋ถ€` 20 ~ 22๋ฒˆ์งธ ์ค„์„ ๋ณด๋ฉด ํ•ด๋‹น ๋ฒ„ํŠผ(<a>)๋Š” ์ด ์กฐ๊ฑด์— ๋งŒ์กฑํ•  ๋•Œ๋งŒ ๋ณด์ด๋Š” ๊ฒƒ์ด์—์š”.

i๊ฐ€ ํ˜„์žฌ ์ด์šฉ์ž๊ฐ€ ์œ„์น˜ํ•œ Page(nowPage)๋ž‘ ๊ฐ™์ง€ ์•Š๋‹ค๋ฉด ํ•ด๋‹น i์˜ ๊ฐ’(์ •์ˆ˜)๋ฅผ ๋ณด์—ฌ์ฃผ๋ฉด์„œ ๋ฒ„ํŠผ์ด ํ™œ์„ฑํ™” ๋˜๊ฒŒ ํ•˜๊ณ , i๊ฐ€ ํ˜„์žฌ ์ด์šฉ์ž๊ฐ€ ์œ„์น˜ํ•œ Page(nowPage)๋ž‘ ์œ„์น˜๊ฐ€ ๊ฐ™๋‹ค๋ฉด ์ˆจ๊ธฐ๋ผ๋Š” ๊ฒƒ์ด์—์š”.

์ด์šฉ์ž๊ฐ€ ์œ„์น˜ํ•œ ๊ณณ์— ๋ฒˆํ˜ธ๊ฐ€ ๊ตณ์ด ํ‘œ์‹œ๋˜์„œ ๋˜ ๋ˆ„๋ฅด๊ฒŒ ํ•  ์ˆ˜ ์žˆ์„ ํ•„์š”๋Š” ์—†๊ธฐ ๋•Œ๋ฌธ์ธ ๊ฒƒ์ด์—์š”.

 

 

 

Pagination.vue 26~30๋ฒˆ์งธ ์ค„

 

class="next"

 

์ž ์ด์ œ ๋‹ค์Œ Page๋กœ ๋„˜์–ด๊ฐ€๊ฒŒ ํ•ด์ฃผ๋Š” Button์„ ํ•œ๋ฒˆ ๋งŒ๋“ค์–ด ๋ณผ ๊ฒƒ์ด์—์š”.

ํ•ด๋‹น ๋ฒ„ํŠผ์„ ๋ˆ„๋ฅด๊ฒŒ ๋˜๋ฉด nextPage()๊ฐ€ ํ˜ธ์ถœ ๋˜๊ฒŒ ๋˜๋Š”๋ฐ, ์–ด๋–ค ์ผ์ด ๋ฒŒ์–ด์งˆ๊นŒ์š”?

 

nextPage()

 

console.log๋Š” ํ™•์ธ์„ ์œ„ํ•œ Code์ด๊ธฐ ๋•Œ๋ฌธ์— ๋„˜์–ด๊ฐ€๊ณ , ์ด์ œ ๋˜ if๋ฌธ์œผ๋กœ ๋ฌผ์–ด๋ณด๋Š” ๊ฒƒ์ด์—์š”.

"์ด์šฉ์ž ์œ„์น˜ Page(nowPage)๊ฐ€ ์ด Page ์ˆ˜(total.Page)๋ณด๋‹ค ์ž‘์Šต๋‹ˆ๊นŒ?"

"๋งŒ์•ฝ ๊ทธ๋ ‡๋‹ค๊ณ  ํ•œ๋‹ค๋ฉด ์ด์šฉ์ž ์œ„์น˜๋ฅผ ํ•˜๋‚˜ ๋”ํ•œ Page์— ์ด๋™ ์‹œํ‚ค๊ธฐ ์œ„ํ•ด nowPage ๊ฐ’์„ ํ•˜๋‚˜ ๋”ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค" ๋ผ๋Š” ์ฒ˜๋ฆฌ๋ฅผ ํ•˜๊ณ  ๋‚˜์„œ ๋˜ ๋ฌผ์–ด๋ณด๋Š” ๊ฒƒ์ด์—์š”.

"๊ทธ๋ฆฌ๊ณ  ํ˜„์žฌ ์ด์šฉ์ž ์œ„์น˜ ๊ฐ’(nowPage)์ด ๋งˆ์ง€๋ง‰ Page(endPage) ๋ณด๋‹ค ํฐ๊ฐ€์š”? ๊ทธ๋ ‡๋‹ค๋ฉด nowPageBlock์˜ ๊ฐœ์ˆ˜๋ฅผ ํ•˜๋‚˜ ๋”ํ•˜๊ณ , ํ˜„์žฌ ์ด์šฉ์ž ์œ„์น˜ Page๋ฒˆํ˜ธ๋ฅผ ์‹œ์ž‘ Page(startPage)์— ๋„ฃ๋„๋ก ํ•˜๊ฒ ์Šต๋‹ˆ๋‹ค"

๊ทธ๋ฆฌ๊ณ , changePage()๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ nowPage๊ฐ’์„ ์กฐ์ •ํ•ด ์ด์šฉ์ž ์œ„์น˜๋ฅผ ๋ณ€ํ™” ์‹œ์ผœ ์ฃผ๋Š” ๊ฒƒ์ด์—์š”.

 

 

 

 

 

 

class="next02"

 

์ด์ œ ๋งˆ์ง€๋ง‰์œผ๋กœ ์ด ์นœ๊ตฌ๋ฅผ ๋งŒ๋“ค์–ด ๋ณผ ๊ฒƒ์ด์—์š”.

click Event๊ฐ€ ๋ฐœ์ƒ๋˜๋ฉด lastPage()๊ฐ€ ํ˜ธ์ถœ์ด ๋˜๋Š” ๊ฒƒ์ด์—์š”.

 

lastPage()

 

์ผ๋‹จ ์ด Method๊ฐ€ ํ˜ธ์ถœ๋˜๋ฉด ์ด Page ๊ฐœ์ˆ˜(totalPage)๊ฐ’์„ ํ˜„์žฌ ์ด์šฉ์ž ์œ„์น˜ Page(nowPage)์— ๋„ฃ์–ด์ฃผ๊ณ , nowPageBlock์— lodashํ˜•์‹์˜ ceil์„ ์ด์šฉํ•˜์—ฌ ์ด Page ๊ฐœ์ˆ˜(totalPage)๋ฅผ pageLimit์— ๋‚˜๋ˆ ์„œ ๋‚˜์˜จ ๊ฐ’์„ ๋ฐ˜์˜ฌ๋ฆผํ•˜๋Š” ๊ฒƒ์ด์—์š”.

๊ทธ๋Ÿฐ ๋’ค ์‹œ์ž‘ Page(startPage)์— (nowPageBlock์— 1์„ ๋บ€ ๊ฐ’)๊ณผ pageLimit์— 1์„ ๋”ํ•œ ๊ฐ’์„ ์„œ๋กœ ๊ณฑํ•œ ๊ฒƒ์„ ๋„ฃ์–ด์ฃผ๋Š” ๊ฒƒ์ด์—์š”.

๊ทธ๋Ÿฐ ๋’ค changePage()๋ฅผ ํ˜ธ์ถœํ•˜์—ฌ ๋งจ ๋งˆ์ง€๋ง‰ Page๋กœ ์ด๋™ํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” ๊ฒƒ์ด๋ž๋‹ˆ๋‹ค.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

728x90
๋ฐ˜์‘ํ˜•