반응형
juery 필요. head에 jquery cdn 추가
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
1. 한 페이지에 나타낼 글 수 선택 HTML
<select id="dataPerPage">
<option value="10">10개씩보기</option>
<option value="15">15개씩보기</option>
<option value="20">20개씩보기</option>
</select>
2. 페이징 표시할 부분 HTML
<ul id="pagingul">
</ul>
3. 데이터 표시할 테이블 HTML
<span id="displayCount"></span>
<table id="dataTableBody">
</table>
4. 페이징 처리 준비를 위한 JavaScript
let totalData; //총 데이터 수
let dataPerPage; //한 페이지에 나타낼 글 수
let pageCount = 10; //페이징에 나타낼 페이지 수
let globalCurrentPage=1; //현재 페이지
let dataList; //표시하려하는 데이터 리스트
$(document).ready(function () {
//dataPerPage 선택값 가져오기
dataPerPage = $("#dataPerPage").val();
$.ajax({ // ajax로 데이터 가져오기
method: "GET",
url: "https://url/data?" + data,
dataType: "json",
success: function (d) {
//totalData(총 데이터 수) 구하기
totalData = d.data.length;
//데이터 대입
dataList=d.data;
});
//글 목록 표시 호출 (테이블 생성)
displayData(1, dataPerPage);
//페이징 표시 호출
paging(totalData, dataPerPage, pageCount, 1);
});
5. 글 목록 표시 함수
//현재 페이지(currentPage)와 페이지당 글 개수(dataPerPage) 반영
function displayData(currentPage, dataPerPage) {
let chartHtml = "";
//Number로 변환하지 않으면 아래에서 +를 할 경우 스트링 결합이 되어버림..
currentPage = Number(currentPage);
dataPerPage = Number(dataPerPage);
for (
var i = (currentPage - 1) * dataPerPage;
i < (currentPage - 1) * dataPerPage + dataPerPage;
i++
) {
chartHtml +=
"<tr><td>" +
dataList[i].d1 +
"</td><td>" +
dataList[i].d2 +
"</td><td>" +
dataList[i].d3 +
"</td></tr>";
} //dataList는 임의의 데이터임.. 각 소스에 맞게 변수를 넣어주면 됨...
$("#dataTableBody").html(chartHtml);
}
반응형
6. 페이징 표시 함수
function paging(totalData, dataPerPage, pageCount, currentPage) {
console.log("currentPage : " + currentPage);
totalPage = Math.ceil(totalData / dataPerPage); //총 페이지 수
if(totalPage<pageCount){
pageCount=totalPage;
}
let pageGroup = Math.ceil(currentPage / pageCount); // 페이지 그룹
let last = pageGroup * pageCount; //화면에 보여질 마지막 페이지 번호
if (last > totalPage) {
last = totalPage;
}
let first = last - (pageCount - 1); //화면에 보여질 첫번째 페이지 번호
let next = last + 1;
let prev = first - 1;
let pageHtml = "";
if (prev > 0) {
pageHtml += "<li><a href='#' id='prev'> 이전 </a></li>";
}
//페이징 번호 표시
for (var i = first; i <= last; i++) {
if (currentPage == i) {
pageHtml +=
"<li class='on'><a href='#' id='" + i + "'>" + i + "</a></li>";
} else {
pageHtml += "<li><a href='#' id='" + i + "'>" + i + "</a></li>";
}
}
if (last < totalPage) {
pageHtml += "<li><a href='#' id='next'> 다음 </a></li>";
}
$("#pagingul").html(pageHtml);
let displayCount = "";
displayCount = "현재 1 - " + totalPage + " 페이지 / " + totalData + "건";
$("#displayCount").text(displayCount);
//페이징 번호 클릭 이벤트
$("#pagingul li a").click(function () {
let $id = $(this).attr("id");
selectedPage = $(this).text();
if ($id == "next") selectedPage = next;
if ($id == "prev") selectedPage = prev;
//전역변수에 선택한 페이지 번호를 담는다...
globalCurrentPage = selectedPage;
//페이징 표시 재호출
paging(totalData, dataPerPage, pageCount, selectedPage);
//글 목록 표시 재호출
displayData(selectedPage, dataPerPage);
});
}
7. 페이지 번호 클릭시
$("#dataPerPage").change(function () {
dataPerPage = $("#dataPerPage").val();
//전역 변수에 담긴 globalCurrent 값을 이용하여 페이지 이동없이 글 표시개수 변경
paging(totalData, dataPerPage, pageCount, globalCurrentPage);
displayData(globalCurrentPage, dataPerPage);
});
페이징 부분 CSS
ul {
text-align: center;
display: inline-block;
border: 1px solid #ccc;
border-right: 0;
padding-left :0;
}
ul li {
text-align: center;
float: left;
list-style:none;
}
ul li a {
display: block;
font-size: 14px;
color: black;
padding: 9px 12px;
border-right: solid 1px #ccc;
box-sizing: border-box;
text-decoration-line:none;
}
ul li.on {
background: #eda712;
}
ul li.on a {
color: #fff;
}
관련글) JAVA Controller에서 모듈을 이용한 클라이언트 페이징처리
반응형
'코딩 관련 > Javascript와 jQuery, JSON' 카테고리의 다른 글
[JavaScript] 방금 클릭한 checkbox, 방금 클릭한 요소 컨트롤, checkbox 컨트롤 (0) | 2021.05.12 |
---|---|
[JavaScript] 동적으로 생성된 DOM에 이벤트 생성 (0) | 2021.05.12 |
[JavaScript] CSV 생성 및 다운로드 (0) | 2021.05.11 |
[JavaScript] Null 연산 Null to 0 (0) | 2021.04.16 |
[AJAX][JavaScript] AJAX 에서 전역변수 이용하기 (0) | 2021.03.25 |