Commit @97fb27bd4f72e9c754c686e94918ddbd8e923ba9

박정하 07-01

250701 박정하 (공통) 페이지네이션 컴포넌트 수정

@97fb27bd4f72e9c754c686e94918ddbd8e923ba9

72b518a

97fb27b

client/views/component/Pagenation.vue

--- client/views/component/Pagenation.vue

+++ client/views/component/Pagenation.vue


 <template>
-  <div class="datatable-bottom">
-      <div class="datatable-info">
-        Showing {{ startIndex + 1 }} to {{ endIndex }} of {{ filteredRows.length }} entries
-      </div>
-      <nav class="datatable-pagination">
-        <ul class="datatable-pagination-list">
-          <li :class="{'datatable-disabled': currentPage === 1}" @click="changePage(currentPage - 1)">
-            <button class="datatable-pagination-list-item-link">‹</button>
-          </li>
-          <li v-for="page in totalPages" 
-              :key="page"
-              :class="{'datatable-active': currentPage === page}">
-            <button class="datatable-pagination-list-item-link" @click="changePage(page)">
-              {{ page }}
-            </button>
-          </li>
-          <li :class="{'datatable-disabled': currentPage === totalPages}" @click="changePage(currentPage + 1)">
-            <button class="datatable-pagination-list-item-link">›</button>
-          </li>
-        </ul>
-      </nav>
-    </div>
+  <div class="pagination">
+    <ul>
+      <li class="arrow" :class="{ disabled: currentPage <= 1 }" @click="changePage(currentPage - 1)">&lt;</li>
+      <template v-for="pageNum in displayedPageNumbers" :key="pageNum">
+        <li :class="{ active: currentPage === pageNum, disabled: currentPage === pageNum }" @click="changePage(pageNum)">{{ pageNum }}</li>
+      </template>
+      <li class="arrow" :class="{ disabled: currentPage >= totalPages }" @click="changePage(currentPage + 1)">&gt;</li>
+    </ul>
+  </div>
 </template>
-
 <script>
 export default {
-  data() {
-    return {
-      currentPage: 1
-    };
-  },
-  computed: {
-    filteredRows() {
-      if (!this.searchQuery) return this.rows;
-      return this.rows.filter(row =>
-        Object.values(row).some(val =>
-          String(val).toLowerCase().includes(this.searchQuery.toLowerCase())
-        )
-      );
-    },
-    totalPages() {
-      return Math.ceil(this.filteredRows.length / this.perPage);
-    },
-    startIndex() {
-      return (this.currentPage - 1) * this.perPage;
-    },
-    endIndex() {
-      return Math.min(this.currentPage * this.perPage, this.filteredRows.length);
-    },
-    paginatedRows() {
-      return this.filteredRows.slice(this.startIndex, this.endIndex);
+  props: {
+    search: {
+      type: Object,
+      required: true,
+      default: () => ({}),
     }
   },
+
+  computed: {
+    // 현재 페이지
+    currentPage() {
+      return this.search.currentPage;
+    },
+
+    // 총 페이지 수
+    totalPages() {
+      return this.search.totalPageCount > 0 ? this.search.totalPageCount : 1;
+    },
+
+    // 표시할 페이지 번호 목록
+    displayedPageNumbers() {
+      const currentPage = this.currentPage;
+      const totalPages = this.totalPages;
+
+      const visiblePages = this.search.pageSize > 0 ? this.search.pageSize : 10;
+
+      // 표시할 페이지 범위 계산
+      let startPageNum = Math.max(1, currentPage - Math.floor(visiblePages / 2));
+      let endPageNum = Math.min(totalPages, startPageNum + visiblePages - 1);
+
+      // endPage가 최대 페이지 수보다 작을 경우, startPage를 조정
+      if (endPageNum - startPageNum + 1 < visiblePages) {
+        startPageNum = Math.max(1, endPageNum - visiblePages + 1);
+      }
+
+      // 페이지 번호 배열 생성
+      const pageNumbers = [];
+      for (let i = startPageNum; i <= endPageNum; i++) {
+        pageNumbers.push(i);
+      }
+
+      return pageNumbers;
+    }
+  },
+
   methods: {
-    changePage(page) {
-      if (page < 1 || page > this.totalPages) return;
-      this.currentPage = page;
+    // 페이지 변경 처리
+    changePage(pageNum) {
+      if (pageNum < 1) pageNum = 1;
+      if (pageNum > this.totalPages) pageNum = this.totalPages;
+
+      if (pageNum !== this.currentPage) {
+        this.$emit('onChange', pageNum);
+      }
     }
   }
 };
-</script>
-
-<style scoped>
-/* Add your styles here */
-</style>
+</script>

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,66 +1,71 @@
1	1	<template>
2		- <div class="datatable-bottom">
3		- <div class="datatable-info">
4		- Showing {{ startIndex + 1 }} to {{ endIndex }} of {{ filteredRows.length }} entries
5		- </div>
6		- <nav class="datatable-pagination">
7		- <ul class="datatable-pagination-list">
8		- <li :class="{'datatable-disabled': currentPage === 1}" @click="changePage(currentPage - 1)">
9		- <button class="datatable-pagination-list-item-link">‹</button>
10		- </li>
11		- <li v-for="page in totalPages"
12		- :key="page"
13		- :class="{'datatable-active': currentPage === page}">
14		- <button class="datatable-pagination-list-item-link" @click="changePage(page)">
15		- {{ page }}
16		- </button>
17		- </li>
18		- <li :class="{'datatable-disabled': currentPage === totalPages}" @click="changePage(currentPage + 1)">
19		- <button class="datatable-pagination-list-item-link">›</button>
20		- </li>
21		- </ul>
22		- </nav>
23		- </div>
	2	+ <div class="pagination">
	3	+ <ul>
	4	+ <li class="arrow" :class="{ disabled: currentPage <= 1 }" @click="changePage(currentPage - 1)"><</li>
	5	+ <template v-for="pageNum in displayedPageNumbers" :key="pageNum">
	6	+ <li :class="{ active: currentPage === pageNum, disabled: currentPage === pageNum }" @click="changePage(pageNum)">{{ pageNum }}</li>
	7	+ </template>
	8	+ <li class="arrow" :class="{ disabled: currentPage >= totalPages }" @click="changePage(currentPage + 1)">></li>
	9	+ </ul>
	10	+ </div>
24	11	</template>
25		-
26	12	<script>
27	13	export default {
28		- data() {
29		- return {
30		- currentPage: 1
31		- };
32		- },
33		- computed: {
34		- filteredRows() {
35		- if (!this.searchQuery) return this.rows;
36		- return this.rows.filter(row =>
37		- Object.values(row).some(val =>
38		- String(val).toLowerCase().includes(this.searchQuery.toLowerCase())
39		- )
40		- );
41		- },
42		- totalPages() {
43		- return Math.ceil(this.filteredRows.length / this.perPage);
44		- },
45		- startIndex() {
46		- return (this.currentPage - 1) * this.perPage;
47		- },
48		- endIndex() {
49		- return Math.min(this.currentPage * this.perPage, this.filteredRows.length);
50		- },
51		- paginatedRows() {
52		- return this.filteredRows.slice(this.startIndex, this.endIndex);
	14	+ props: {
	15	+ search: {
	16	+ type: Object,
	17	+ required: true,
	18	+ default: () => ({}),
53	19	}
54	20	},
	21	+
	22	+ computed: {
	23	+ // 현재 페이지
	24	+ currentPage() {
	25	+ return this.search.currentPage;
	26	+ },
	27	+
	28	+ // 총 페이지 수
	29	+ totalPages() {
	30	+ return this.search.totalPageCount > 0 ? this.search.totalPageCount : 1;
	31	+ },
	32	+
	33	+ // 표시할 페이지 번호 목록
	34	+ displayedPageNumbers() {
	35	+ const currentPage = this.currentPage;
	36	+ const totalPages = this.totalPages;
	37	+
	38	+ const visiblePages = this.search.pageSize > 0 ? this.search.pageSize : 10;
	39	+
	40	+ // 표시할 페이지 범위 계산
	41	+ let startPageNum = Math.max(1, currentPage - Math.floor(visiblePages / 2));
	42	+ let endPageNum = Math.min(totalPages, startPageNum + visiblePages - 1);
	43	+
	44	+ // endPage가 최대 페이지 수보다 작을 경우, startPage를 조정
	45	+ if (endPageNum - startPageNum + 1 < visiblePages) {
	46	+ startPageNum = Math.max(1, endPageNum - visiblePages + 1);
	47	+ }
	48	+
	49	+ // 페이지 번호 배열 생성
	50	+ const pageNumbers = [];
	51	+ for (let i = startPageNum; i <= endPageNum; i++) {
	52	+ pageNumbers.push(i);
	53	+ }
	54	+
	55	+ return pageNumbers;
	56	+ }
	57	+ },
	58	+
55	59	methods: {
56		- changePage(page) {
57		- if (page < 1 \|\| page > this.totalPages) return;
58		- this.currentPage = page;
	60	+ // 페이지 변경 처리
	61	+ changePage(pageNum) {
	62	+ if (pageNum < 1) pageNum = 1;
	63	+ if (pageNum > this.totalPages) pageNum = this.totalPages;
	64	+
	65	+ if (pageNum !== this.currentPage) {
	66	+ this.$emit('onChange', pageNum);
	67	+ }
59	68	}
60	69	}
61	70	};
62		-</script>
63		-
64		-<style scoped>
65		-/* Add your styles here */
66		-</style>
	71	+</script> (파일 끝에 줄바꿈 문자 없음)

Delete comment