$$config title: [js] 페이징 js로 구현 keywords: - IT - js $$ [참고](https://mchch.tistory.com/140) # 페이징 - cdn추가 ```js ``` - 한페이지에 나타낼 글 수 선택 ```html ``` - 페이징 표시할 부분 / 데이터 표시할 테이블 ```html

``` - 페이징 처리 준비 ```js let totalData; //총 데이터 수 let dataPerPage; //한 페이지에 나타낼 글 수 let pageCount = 10; //페이징에 나타낼 페이지 수 let globalCurrentPage=1; //현재 페이지 let dataList; //표시하려하는 데이터 리스트 $(document).ready(function () { //dataPerPage 선택값 가져오기 dataPerPage = $("#dataPerPage").val(); $.ajax({ // ajax로 데이터 가져오기 method: "GET", url: 연결할 url dataType: "json", success: function (d) { //totalData(총 데이터 수) 구하기 totalData = d.data.length; //데이터 대입 dataList=d.data; }); //글 목록 표시 호출 (테이블 생성) displayData(1, dataPerPage); //페이징 표시 호출 paging(totalData, dataPerPage, pageCount, 1); }); ``` - 글 목록 표시 함수 ```js //현재 페이지(currentPage)와 페이지당 글 개수(dataPerPage) 반영 function displayData(currentPage, dataPerPage) { let chartHtml = ""; //Number로 변환하지 않으면 아래에서 +를 할 경우 스트링 결합이 되어버림.. currentPage = Number(currentPage); dataPerPage = Number(dataPerPage); let maxpnum = (currentPage - 1) * dataPerPage + dataPerPage; if(maxpnum > count){ maxpnum = count; } for (var i = (currentPage - 1) * dataPerPage; i < maxpnum; i++) { chartHtml += "" + dataList[i].d1 + "" + dataList[i].d2 + "" + dataList[i].d3 + ""; } //dataList는 임의의 데이터임.. 각 소스에 맞게 변수를 넣어주면 됨... $("#dataTableBody").html(chartHtml); } ``` - 페이징 표시 함수 ```js function paging(totalData, dataPerPage, pageCount, currentPage) { console.log("currentPage : " + currentPage); totalPage = Math.ceil(totalData / dataPerPage); //총 페이지 수 if(totalPage totalPage) { last = totalPage; } let first = last - (pageCount - 1); //화면에 보여질 첫번째 페이지 번호 let next = last + 1; let prev = first - 1; let pageHtml = ""; if (prev > 0) { pageHtml += "

"; } //페이징 번호 표시 for (var i = first; i <= last; i++) { if (currentPage == i) { pageHtml += "

"; } else { pageHtml += "

" + i + "

"; } } if (last < totalPage) { pageHtml += "

"; } $("#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); }); } ``` - 페이지 번호 클릭시 ```js $("#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; } ```