조코드

저번  기본 CRUD 게시판에 이어 페이징을 해보았다.

참고 : https://mchch.tistory.com/140

javascript, jquery를 사용, ajax통신을 태울것이다.

index.html

<div class="table form-group">
    <table class="table">

        <thead>
            <tr>
                <th>번호</th>
                <th>제목</th>
                <th>작성자</th>
                <th>날짜</th>
            </tr>
        </thead>
        <tbody id="dataTableBody">

        </tbody>
    </table>
</div>

<!-- 페이징:S -->
<ul id="pagingul">
</ul>
<!-- 페이징:E -->


<script src="~/Scripts/BoardList.js"></script>

게시물을 받아올 tbody와 페이징을 표시할 ul을 만들어준다. 

BoardList.js

let totalData; //총 데이터 수
let dataPerPage; //한 페이지에 나타낼 글 수
let pageCount = 5; //페이징에 나타낼 페이지 수
let globalCurrentPage = 1; //현재 페이지
var globalData; //controller에서 가져온 data 전역변수

$(document).ready(function () {

	dataPerPage = 5;

	var Id = 1

	var param = { Id: Id };

    ajaxPost("/Home/GetBoardAjax", param, function (data) {

        totalData = data.length;
        globalData = data;


		//글 목록 표시 호출 (테이블 생성)
        displayData(1, dataPerPage, data);

		//페이징 표시 호출
		paging(totalData, dataPerPage, pageCount, 1);

    });
});

	
function paging(totalData, dataPerPage, pageCount, 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 () {
        globalData

        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, globalData);
    });
}


//현재 페이지(currentPage)와 페이지당 글 개수(dataPerPage) 반영
function displayData(currentPage, dataPerPage, data) {
    let chartHtml = "";

    //Number로 변환하지 않으면 아래에서 +를 할 경우 스트링 결합이 되어버림.. 
    currentPage = Number(currentPage);
    dataPerPage = Number(dataPerPage);

    for (var i = (currentPage - 1) * dataPerPage; i < (currentPage - 1) * dataPerPage + dataPerPage; i++)
    {

        if (data[i] == undefined)
        {
            break;
        }
        
        chartHtml +=
            "<tr><td>" +
            data[i].Num +
            "</td><td>" +
            data[i].Title+
            "</td><td>" +
            data[i].Name +
            "</td><td>" +
            data[i].Date +
            "</td></tr>";
    }
    $("#dataTableBody").empty();
    $("#dataTableBody").append(chartHtml);
}

param값을 1로 줬는데 이유 없습니다 ...ㅎ 

임의로 넣어놓은것이고 인자값이 필요하면 맞게 넣어서 사용하면 됩니다.

HomeController.cs

public JsonResult GetBoardAjax()
        {

            List<User> result = dbSystem.GetBoard();

            return Json(result);
        }

generic list에 select된 게시물 정보를 담아 json return 해줍니다. 

참고로 dbSystem은 수정된 코드이니 전 게시물을 참고해 select해오시면 됩니다. 

Site.css

ul {
    text-align: center;
    display: inline-block;
    
    border-right: 0;
    list-style: none;
}
ul li {
    text-align: center;
    float: left;
}

ul li a {
    display: block;
    font-size: 14px;
    padding: 9px 12px;
    box-sizing: border-box;
}

ul li.on {
    background: #eda712;
}

ul li.on a {
    color: #fff;
}