Basic
js
const props = {
maxPage: 10,
totalPage: 15,
};
const state = {
currentPage: 1,
get pages () {
const currentPageIndex = Math.ceil(state.currentPage / props.maxPage);
const startPage = (currentPageIndex - 1) * props.maxPage + 1;
const pageLength = Math.min(props.maxPage, props.totalPage - startPage + 1);
return Array.from({length: pageLength}).map((_value, index) => startPage + index)
}
};
const mutation = {
mutateCurrentPage: (page) => {
state.currentPage = page;
}
};
const actions = {
handleNext: () => {
mutation.mutateCurrentPage(state.currentPage + 1);
},
handlePrev: () => {
mutation.mutateCurrentPage(state.currentPage - 1);
}
};html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button onclick="actions.handlePrev(); render()">Prev</button>
<button onclick="actions.handleNext(); render()">Next</button>
<div id="pagination"></div>
<script src="pagination.js"></script>
<script>
const render = () => {
const html = `<ul>${state.pages.map(v => {
return `<li>${v}: ${v === state.currentPage ? 'Selected' : ''}</li>`
}).join('')}</ul>`
document.querySelector('#pagination').innerHTML = html
}
window.onload = () => {
render()
}
</script>
</body>
</html>이전/다음 버튼 노출 조건
js
const chunk = (arr, size) =>
Array.from({ length: Math.ceil(arr.length / size) }, (v, i) =>
arr.slice(i * size, i * size + size)
);
const toPaginationGroup = (totalPage, maxPage) => {
const pagination = Array
.from({length: totalPage}, (v, i) => i + 1);
return chunk(pagination, maxPage);
};
const props = {
maxPage: 10,
totalPage: 24,
};
const state = {
paginationGroupIndex: 0,
currentPage: 1,
get paginationGroup () {
return toPaginationGroup(props.totalPage, props.maxPage)
},
get pages () {
return state.paginationGroup[state.paginationGroupIndex]
},
get hasNext () {
const groupLength = state.paginationGroup.length;
if (groupLength === 1) {
return false;
}
return groupLength - 1 > state.paginationGroupIndex;
},
get hasPrev () {
return state.paginationGroupIndex > 0;
},
};
const mutation = {
changeCurrentPage: (page) => {
state.currentPage = page;
}
};
const actions = {
handleNext: () => {
state.paginationGroupIndex += 1;
mutation.changeCurrentPage(state.pages[0])
},
handlePrev: () => {
state.paginationGroupIndex -= 1;
mutation.changeCurrentPage(state.pages[state.pages.length - 1])
}
};html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="pagination"></div>
<script src="pagination2.js"></script>
<script>
const render = () => {
const nextButton = state.hasNext ?
'<button onclick="actions.handleNext(); render()">Next</button>' :
'';
const prevButton = state.hasPrev ?
'<button onclick="actions.handlePrev(); render()">Prev</button>' :
'';
const pagination = `<ul>${state.pages.map(v => {
const button = `<button onclick="mutation.changeCurrentPage(${v}); render()">
${v}: ${v === state.currentPage ? 'Selected' : ''}
</button>`;
return `<li>${button}</li>`
}).join('')}</ul>`
const html = `
${prevButton}
${nextButton}
${pagination}
`;
document.querySelector('#pagination').innerHTML = html
};
window.onload = () => {
render()
}
</script>
</body>
</html>