mindol1004/spring-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

pagination update

Browse Source
This commit is contained in:
leejinseok
2020-02-21 12:05:23 +09:00
parent 32d05d71dc
commit 8215594e93
3 changed files with 30 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/front/src/pages/articles/List.vue
View File

@@ -47,7 +47,6 @@
import articleService from "../../services/articleService";
import Header from '../../components/common/Header';
import paginationUtil from "../../utils/paginationUtil";
import paginationUtil2 from "../../utils/paginationUtil2";
export default {
name: "List",
@@ -97,14 +96,7 @@
const data = await articleService.getArticles({page});
const {content, totalPages, pageable} = data;
// console.log(page, totalPages);
// this.pages = paginationUtil(page, totalPages);
// const pages2 = paginationUtil2(page, totalPages, 3);
this.pages = paginationUtil2(page + 1, totalPages);
console.log('');
this.pages = paginationUtil(page + 1, totalPages);
this.articles = content;
this.pending = false;

54
src/front/src/utils/paginationUtil.js
View File

@@ -1,30 +1,34 @@
export default function (currentPage, pageCount) {
let current = currentPage,
last = pageCount,
delta = 2,
left = current - delta,
right = current + delta + 1,
range = [],
rangeWithDots = [],
l;
for (let i = 1; i <= last; i++) {
if (i == 1 || i == last || i >= left && i < right) {
range.push(i);
}
export default function (currentPage, totalPage, chapterSize = 5) {
const halfOfFirstChapter = Math.ceil(chapterSize / 2);
const halfOfLastChapter = totalPage - halfOfFirstChapter;
let start;
let end;
if (currentPage < halfOfFirstChapter) {
start = 1;
end = chapterSize;
} else if (currentPage > halfOfLastChapter) {
start = totalPage - chapterSize + 1;
end = totalPage;
} else {
const rest = (chapterSize - 1);
const halfOfRest = rest / 2;
start = currentPage - halfOfRest;
end = currentPage + halfOfRest;
}
for (let i of range) {
if (l) {
if (i - l === 2) {
rangeWithDots.push(l + 1);
} else if (i - l !== 1) {
rangeWithDots.push('...');
}
}
rangeWithDots.push(i);
l = i;
const range = [];
for (let i = start; i <= end; i++) {
range.push(i);
}
return rangeWithDots;
}
return {
range,
isPrev: currentPage > 1,
isNext: currentPage < totalPage,
first: 1,
last: totalPage
}
}

77
src/front/src/utils/paginationUtil2.js
View File

@@ -1,77 +0,0 @@
export default function (currentPage, totalPage, chapterSize = 5) {
// first = 1, totalPage = 16, chapterSize = 5
// currentPage = 1
// [1,2,3,4,5]
// currentPage = 2
// [1,2,3,4,5]
// currentPage = 3
// [1,2,3,4,5]
// currentPage = 4
// [2,3,4,5,6]
// currentPage가 chapterSize의 중간 값(반올림)보다 작으면
// currentPage 1 => left -0, right +4
// currentPage 2 => left -1, right +3
const halfOfChapterSize = Math.ceil(chapterSize / 2);
const halfOfLastChapter = totalPage - halfOfChapterSize;
let extra = chapterSize - 1;
let start;
let end;
if (currentPage < halfOfChapterSize) {
start = currentPage + (1 - currentPage);
end = currentPage + halfOfChapterSize + (halfOfChapterSize - currentPage);
} else if (currentPage > halfOfLastChapter) {
let remainExtra = extra - (totalPage - currentPage);
start = currentPage + (totalPage - currentPage);
end = currentPage - remainExtra;
} else {
start = currentPage - extra / 2;
end = currentPage + (extra / 2);
end++;
}
// currentPage 12
// [10,11,12,13,14]
// currentPage 13
// [11,12,13,14,15]
// currentPage 14
// [12,13,14,15,16]
// currentPage 15
// [12,13,14,15,16]
// currentPage 16
// [12,13,14,15,16]
// currentPage가 totalPage - halfOfChapterSize + 1 (14) 보다 크면
// currentPage 15 => left -3, right +1
// currentPage 16 => left -4, right +0
const range = [];
for (let i = start; i < end; i++) {
range.push(i);
}
return {
range,
isPrev: currentPage > 0,
isNext: currentPage < totalPage - 1
}
}