[JavaScript Code] ajax 페이지네이션

 

var PageSize = 10; // 페이지당 보여줄 목록수
var PageGroupSize = 10; // 페이지네이션 리스트 수
var TableAndPage = "makeTableAndPagination";
var currentPageNumStorage;

$(document).ready(
	$(function() {
		makeTableAndPagination('1');
	})
)

var makeTableAndPagination = function(p_currentPage) {

	var TotalCount;
	var count;

	var tag = "";

	$.ajax({
		type: "GET",
		url: "getInformation?pageNum=" + p_currentPage,
		success: function(data) {

			// 총 데이터 수
			TotalCount = data.total;

			// 페이지네이션 그리기
			tagFactoryPage(p_currentPage, TotalCount);
			
			// 현재 페이지번호 → 현재 페이지 번호를 기억시켜 다른 action을 해도 그대로 있게 하기
			currentPageNumStorage = p_currentPage;
		}
	}); // ajax 종료
}


var tagFactoryPage = function(currentPage, total) {

	var total = total; // 전체건수
	var currentPage = currentPage; // 현재페이지

	var pageTotCount = Math.ceil(tot_count / indexPageSize); // 전체페이지수 → 15 / 10 = 0.5 → 1
	var numPageGroup = Math.ceil(currentPage / indexPageGroupSize); // 현재페이지가 10 이내일 경우 → 1
																	
	var startPage = (numPageGroup - 1) * PageGroupSize + 1; // 1 11 21
	var endPage = startPage + PageGroupSize - 1 // 10 20 30

	if (endPage > pageTotCount) endPage = pageTotCount; // 마지막페이지가 전체페이지보다 큰경우 처리 20 > 12

	var HtmlTag = "";

	// 첫번째페이지 표시 >> 누르면 가장 마지막 페이지 이동
	// 1 ~ 10 페이지에 속하지만 않으면 무조건 나옵니다. 
	if (startPage <= PageGroupSize) HtmlTag += ""; // startPage(1, 10, 20) 이 PageGroupSize(1[1~10], 2[11~20]) 보다
	else HtmlTag += "<li class='page-item page-item1'><a href=# class='page-link' onclick=" + TableAndPage + "('1')>  《 </a></li>";

	// 이전페이지 표시 < 누를시 11 ~ 20 은 10으로 21 ~ 30 은 20으로 이동합니다.
	// 1 ~ 10 페이지에 속하지만 않으면 무조건 나옵니다. 
	if (startPage <= PageGroupSize) HtmlTag += "";
	else HtmlTag += "<li class='page-item page-item1'><a href=# class='page-link' onclick=" + TableAndPage + "('" + (startPage - 1) + "')>〈 </a></li>";

	var idx = 0;
	for (idx = startPage; idx <= endPage; idx++) {

		// 자기자신의 페이지일경우 active 활성화와 하이퍼링크 제거
		if (currentPage == idx) HtmlTag += "<li class='page-item page-item1 active' id=pagination value='" + idx + "'><a href=# class='page-link'>" + idx + "</a></li>";
		else HtmlTag += "<li class='page-item page-item1'><a class='page-link' href=# onclick=" + TableAndPage + "('" + idx + "')>" + idx + "</a></li>";

	}

	// 다음페이지 표시 > 누를시 1 ~ 10 은 11으로 11 ~ 20 은 21으로 이동합니다.
	// 전체 페이지가 마지막 페이지부분만 아니면 >로 이동 가능한 페이지네이션을 만듭니다.
	if (pageTotCount == endPage) HtmlTag += "";
	else HtmlTag += "<li class=page-item page-item1><a class='page-link' onclick=" + TableAndPage + "('" + (endPage + 1) + "')>〉</a></li>"; // 다음

	// 마지막페이지 표시 >> 누르면 가장 마지막 페이지 이동
	// 전체 페이지가 마지막 페이지부분만 아니면 >로 이동 가능한 페이지네이션을 만듭니다.
	if (pageTotCount == endPage) HtmlTag += "";
	else HtmlTag += "<li class=page-item page-item1><a class='page-link' href=# onclick=" + TableAndPage + "('" + pageTotCount + "')> 》 </a></li>";

	$(".page-item1").remove();         // 페이지네이션이 그려졌던 걸 지우고 다시 그립니다. → 안 지우면 페이지 이동시 남아 있는 상태로 붙여넣기가 된다.
	$("#page_list_navi").append(HtmlTag); // 새롭게 프로젝트 list를 생성한다.

}

ajax통신을 하는 javascript입니다.

 

<div class="paging">
    <ul class="pagination justify-content-center"
        id="page_list_navi_index">
    </ul>
</div>

html에서 페이지네이션을 그려넣을 부분입니다.

무조건 전체갯수가 필요합니다