오늘 받은 업무는 여러개의 데이터를 페이징 처리를 해라
라는 업무를 받아서 여러 페이지 서치를 통해 구현했습니다
먼저 저는 함수로 구현을 했는데 이유는 다른 페이지에서도 사용가능 하도록 하기 위함 입니다
html태그는 해드와 바디를 구분 짓기 위해 이렇게 작성 했습니다
<body>
<table>
<thead>
<tr>
<td>번호</td>
<td>구분</td>
<td>수식</td>
<td>계산</td>
<td>메시지</td>
</tr>
</thead>
</table>
<tbody id="anlyResultList">
</tbody>
<div ="pagination" sylte="text-align:center">
</body>
테스트 데이터는 이렇습니다
var list = [
{no : 1, gubun: '구분자1', formula:'B', calcFrq:123123, collisMsg:'메시지'},
{no : 2, gubun: '구분자2', formula:'B', calcFrq:123123, collisMsg:'메시지'},
{no : 3, gubun: '구분자3', formula:'B', calcFrq:123123, collisMsg:'메시지'},
{no : 4, gubun: '구분자4', formula:'B', calcFrq:123123, collisMsg:'메시지'},
{no : 5, gubun: '구분자5', formula:'B', calcFrq:123123, collisMsg:'메시지'}
];
그리고 함수는 이러합니다 list 변수를 전역으로 해놓고 테스트를 진행했으며 함수화 시키려면
pagenationArr함수에 매개변수를 추가 해주면 되겠습니다
function pagenationArr(curntPage = 1, pgnationTag = "pagination"){
let currentPage = curntPage; //현재 페이지 번호
const totalCount = list.length; //총 데이터 갯수
let limit = 5 //화면에 표출 될 페이지의 갯수
let pageCount = 5; //한 페이지에 나타낼 데이터 갯수
//페이지 갯수 계산
let totalPage = Math.ceil(totalCount / limit);
//현재 페이지 그룹 계산 ex. 12345 1그룹 678910 2그룹
let pageGroup = Math.ceil(currentPage / pageCount);
//마지막 번호
let lastNumber = pageGroup * pageCount;
//마지막 번호가 마지막 페이지보다 클 경우는 치환 해줌
if (lastNumber > totalPage) {
lastNumber = totalPage;
}
let firstNumber = lastNumber - (pagecount -1);
const next = lastNumber +1;
const prev = firstNumber -1;
let htmlTag = "";
//이전 버튼 태그 생성 ex. <
if(prev != 0) {
htmlTag += "<a href='javascript:;' onclick='pagenationArr("+prev+");' class='pageNumber'><</a>";
}
//페이지 번호 생성 ex. 1 2 3 4 5
for (let i = firstNumber; i <= lastNumber; i++){
htmlTag += "<a href='javascript:;' onclick='pagenationArr("+i+");' class='pageNumber' id='page_"+i+"' >"+i+"</a>";
}
//다음 버튼 표출 ex. >
if (next != 0 && next < totalPage) {
htmlTag += "<a href='javascript:;' onclick='pagenationArr("+i+");' class='pageNumber'>></a>";
}
$('#'+pgnationTag).empty();
$('#'+pgnationTag).append(htmlTag);
let strIdx = ((currentPage -1) * limit);
let endIdx = (currentPage * limit);
//데이터 출력
viewAnlyResultList(list, strIdx, endIdx, "anlyResultList");
}
function viewAnlyResultList(list, strIdx, endIdx, tagId) {
let html = "";
//데이터 태그 생성
for (strIdx; strIdx < endIdx; strIdx++) {
html += "<tr>";
html += " <td>"+ list[strIdx].no +"</td>";
html += " <td>"+ list[strIdx].gubun +"</td>";
html += " <td>"+ list[strIdx].formula +"</td>";
html += " <td>"+ list[strIdx].calcFrq +"</td>";
html += " <td>"+ list[strIdx].collisMsg +"</td>";
html += "</tr>";
}
$(tagId).empty();
$(tagId).append(html);
}
가장 중요한 부분은 바로 현재 페이지 상태를 알 수 있는 데이터들 입니다
현재 페이지 = 1번째 페이지인지 2번째 페이지인지 확인
총 데이터 갯수 = 데이터를 배열로 받았을 때 데이터의 갯수
화면에 표출 될 페이지 갯수 = 페이지 네이션의 번호 1 2 3 4 5 라고 하면 이 값은 5입니다
한 페이지에 나타낼 데이터 갯수 = 1번째 페이지로 이동 했을때 5개의 데이터를 표출 시킨다면 5입니다
전체 페이지 갯수 = 전체 데이터 / 화면에 표출될 페이지 갯수 (전체 데이터가 100이라고하면 100 / 5 이므로 20입니다
그럼 페이지 네이션의 번호는 20 번까지 있을겁니다
현재 페이지 그룹 = 한 페이지에 5개의 페이지 번호를 표출 시킨다고 했습니다 그러면 이것을 그룹화 하여 1 2 3 4 5 까지
표출 되는 페이지는 1그룹 이고 그다음페이지는 6 7 8 9 10 이며 2그룹 입니다
이전 페이지 다음 페이지 버튼을 동작하게 하기 위해서 필요합니다
마지막 번호 = 페이지 그룹 * 페이지갯수
첫번째 번호 = 마지막 번호 - ( 현재 페이지 그룹 -1)
다음 페이지 = 마지막 번호 + 1
이전페이지 = 첫번째 번호 -1
이정도만 확인하고 있어도 페이지네이션의 구성을 알 수 있습니다
'Developer > Javascript' 카테고리의 다른 글
| [javascript]div태그를 input처럼 사용하고 전체 선택 설정 (0) | 2022.10.06 |
|---|---|
| [javascript]엑셀 다운로드 기능 구현 (0) | 2022.08.12 |
| [javascript] input 글자수 제한하기 (0) | 2022.07.27 |
| [javascript]radio 전체 체크하기 (0) | 2022.07.12 |
| [javascript]JSON (0) | 2022.07.07 |