Coding Planet
jQuery, Java Scriptλ‘ νμ΄μ§λ€μ΄μ (pagination) ꡬννκΈ° - μ½λ ν¬ν¨ λ³Έλ¬Έ
jQuery, Java Scriptλ‘ νμ΄μ§λ€μ΄μ (pagination) ꡬννκΈ° - μ½λ ν¬ν¨
jhj.sharon 2023. 6. 29. 10:17
1. ꡬν μ½λ
μ΄ μ½λλ νμ΄μ§λ€μ΄μ μ μ€μ νλ `setupPagination` ν¨μμ κ΄λ ¨ κΈ°λ₯μ ꡬνν μ½λμ λλ€.
λ€μμ κ° λΆλΆμ μ€λͺ
μ
λλ€:
1. `setupPagination` ν¨μ:
- `rowsPerPage`: ν νμ΄μ§μ 보μ¬μ€ νλͺ© μλ₯Ό λνλ΄λ λ³μμ
λλ€.
- `rows`: νμ΄μ§λ€μ΄μ
μ μ μ©ν νλͺ©λ€μ λ°°μ΄μ
λλ€.
- `rowsCount`: νλͺ©μ μ΄ κ°μλ₯Ό λνλ΄λ λ³μμ
λλ€.
- `pageCount`: μ 체 νμ΄μ§ μλ₯Ό λνλ΄λ λ³μμ
λλ€.
- `numbers`: νμ΄μ§ λ²νΈλ₯Ό νμνλ μμ(μ: μ«μ λͺ©λ‘)λ₯Ό λνλ΄λ λ³μμ
λλ€.
- `prevPageBtn`, `nextPageBtn`: μ΄μ νμ΄μ§ λ° λ€μ νμ΄μ§λ‘ μ΄λνλ λ²νΌμ λνλ΄λ λ³μμ
λλ€.
- `pageActiveIdx`: νμ¬ νμ΄μ§ κ·Έλ£Ήμ λ²νΈλ₯Ό λνλ΄λ λ³μμ
λλ€.
- `currentPage`: νμ¬ λ³΄κ³ μλ νμ΄μ§μ λ²νΈλ₯Ό λνλ΄λ λ³μμ
λλ€.
- `maxPageNum`: νμ΄μ§ κ·Έλ£Ήμ μ΅λ κ°μλ₯Ό λνλ΄λ λ³μμ
λλ€.
2. νμ΄μ§ λ²νΈ μμ±:
- `numbers` μμμ `pageCount` λ§νΌμ νμ΄μ§ λ²νΈλ₯Ό μμ±νμ¬ μΆκ°ν©λλ€.
- μμ±λ νμ΄μ§ λ²νΈλ ν΄λ¦ μ΄λ²€νΈμ μλ΅νκΈ° μν΄ `numbersBtn` λ³μμ ν λΉλ©λλ€.
3. νμ΄μ§λ€μ΄μ
λ²νΈ μ¨κΈ°κΈ°:
- `numbersBtn` λ°°μ΄μ μννλ©° κ° νμ΄μ§ λ²νΈλ₯Ό μ¨κΉλλ€.
4. νμ΄μ§ λ²νΈ ν΄λ¦ μ΄λ²€νΈ:
- `numbersBtn`μ κ° μμμ ν΄λ¦ μ΄λ²€νΈ 리μ€λλ₯Ό μΆκ°ν©λλ€.
- ν΄λ¦ μ `displayRow` ν¨μλ₯Ό νΈμΆνμ¬ ν΄λΉ νμ΄μ§μ νλͺ©μ νμν©λλ€.
5. `displayRow` ν¨μ:
- νμ΄μ§ λ²νΈμ ν΄λΉνλ νλͺ©μ νμνκ³ λλ¨Έμ§ νλͺ©μ μ¨κΉλλ€.
- `start`μ `end` λ³μλ₯Ό μ¬μ©νμ¬ λ³΄μ¬μ€ νλͺ©μ λ²μλ₯Ό κ³μ°ν©λλ€.
- `rowsArray` λ°°μ΄μ μννλ©° κ° νλͺ©μ νμ μ¬λΆλ₯Ό κ²°μ ν©λλ€.
- μ νλ νμ΄μ§ λ²νΈμ λ²νΌμ `active` ν΄λμ€λ₯Ό μΆκ°ν©λλ€.
6. νμ΄μ§ κ·Έλ£Ή νμ ν¨μ (`displayPage`):
- νμ΄μ§ λ²νΈλ₯Ό ν΄λΉ νμ΄μ§ κ·Έλ£Ήμ λ§κ² νμνκ³ λλ¨Έμ§λ μ¨κΉλλ€.
- `totalPageCount` λ³μλ₯Ό μ¬μ©νμ¬ μ 체 νμ΄μ§ κ·Έλ£Ή μλ₯Ό κ³μ°ν©λλ€.
- `pageArr` λ°°μ΄μ μννλ©° κ° νμ΄μ§ λ²νΈμ νμ μ¬λΆλ₯Ό κ²°μ ν©λλ€.
- νμ¬ νμ΄μ§ κ·Έλ£Ήμ μΈλ±μ€μ λ°λΌ μ΄μ νμ΄μ§ λ° λ€μ νμ΄μ§ λ²νΌμ νμ μ¬λΆλ₯Ό κ²°μ ν©λλ€.
7. λ€μ νμ΄μ§ λ° μ΄μ νμ΄μ§ λ²νΌ ν΄λ¦ μ΄λ²€νΈ:
- `nextPageBtn` λ° `prevPageBtn`μ ν΄λ¦ μ΄λ²€νΈ 리μ€λλ₯Ό μΆκ°ν©λλ€.
$(document).ready(function() {
setupPagination();
});
function setupPagination(){
const rowsPerPage = 12;
const rows = document.querySelectorAll('.product-list li');
const rowsCount = rows.length;
const pageCount = Math.ceil(rowsCount / rowsPerPage);
const numbers = document.querySelector('#numbers');
const prevPageBtn = document.querySelector('.pagination .fa-arrow-left');
const nextPageBtn = document.querySelector('.pagination .fa-arrow-right');
let pageActiveIdx =0; //νμ¬ νμ΄μ§ κ·Έλ£Ήμ λ²νΈ
let currentPage = 0; //νμ¬ λ³΄κ³ μλ νμ΄μ λ€μ΄μ
λ²νΈ
let maxPageNum =3; //νμ΄μ§κ·Έλ£Ή μ΅λ κ°μ
console.log("rowsCount",rowsCount);
console.log("rowsCount",pageCount);
for (let i = 1; i <= pageCount; i++) {
numbers.innerHTML += `<li><a href="">${i}</a></li>`;
}
//νμ΄μ§λ€μ΄μ
ν΄λ¦
const numbersBtn = numbers.querySelectorAll('a');
//νμ΄μ§λ€μ΄μ
λ²νΈ κ°μΆκΈ°
for(nb of numbersBtn){
nb.style.display = 'none';
}
numbersBtn.forEach((item, idx)=>{
item.addEventListener('click',(e)=>{
e.preventDefault() // κΈ°λ³ΈκΈ°λ₯ λ§κΈ°
displayRow(idx)
})
})
function displayRow(idx) {
let start = idx * rowsPerPage;
let end = start + rowsPerPage;
let rowsArray = [...rows];
//let rowsArray = Array.from(rows);
for(ra of rowsArray) {
//μ보μ΄κ² νκΈ°
ra.style.display = 'none';
}
let newRows =rowsArray.slice(start, end);
for(nr of newRows) {
nr.style.display = '';
}
//css μ‘°μ
for(nb of numbersBtn){
nb.classList.remove('active');
}
numbersBtn[idx].classList.add('active');
//console.log("idx::",idx);
}//displayRow
//νμ΄μ§ λλλ§μ νμ΄μ§λ€μ΄μ
λ°λ‘ μ μ©
displayRow(0);
//νμ΄μ§λ€μ΄μ
κ·Έλ£Ή νμ ν¨μ
function displayPage(num) {
//νμ΄μ§λ€μ΄μ
λ²νΈ κ°μΆκΈ°
for(nb of numbersBtn){
nb.style.display = 'none';
}
let totalPageCount = Math.ceil(pageCount / maxPageNum);
let pageArr = [...numbersBtn];
let start =num*maxPageNum;
let end = start + maxPageNum;
let pageListArr = pageArr.slice(start, end);
for(pa of pageListArr) {
pa.style.display = 'block';
}
//첫νμ΄μ§μ νμ΄ν μ보μ΄κ²νκΈ°
if(pageActiveIdx == 0){
prevPageBtn.style.display = 'none';
}else{
prevPageBtn.style.display = 'block';
}
if(pageActiveIdx == totalPageCount-1){
nextPageBtn.style.display = 'none';
}else{
nextPageBtn.style.display = 'block';
}
}
displayPage(0);
nextPageBtn.addEventListener('click', ()=>{
let nextPageNum = pageActiveIdx*maxPageNum+maxPageNum;
displayRow(nextPageNum);
++pageActiveIdx;
displayPage(pageActiveIdx);
});
prevPageBtn.addEventListener('click', ()=>{
let prevPageNum = pageActiveIdx*maxPageNum-maxPageNum;
displayRow(prevPageNum);
--pageActiveIdx;
displayPage(pageActiveIdx);
});
}
//-----------pagination End----------------------------------------
2. μ€μ ꡬνλ λͺ¨μ΅
'π» Java Study' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
No serializer found for class - @JsonPropertyλ‘ ν΄κ²° (0) | 2023.10.18 |
---|---|
[μ΄νν°λΈ μλ°]chapter2 : [μμ΄ν 6] λΆνμν κ°μ²΄ μμ±μ νΌνλΌ (0) | 2023.08.16 |