게시판 페이징 ajax 스크립트

1. 게시판 페이징 ajax 스크립트

// 게시판 조회하는 함수
var board = {};
var lstCnt = 10;
board.boardList = {
        init : function(cmpnNo, lstCnt) {
            var page = 1;
            board.boardList.param.pageNumber = Number(page);
            board.boardList.param.cmpnNo = cmpnNo;
            board.boardList.param.pageSize = lstCnt;
            board.boardList.data();
        },
       data : function() {
            $.ajax({
                url : 'event/boardList',
                data : board.boardList.param,
                success : function(result) {
                    var boardList = result.boardList;
                    if(boardList.length != 0){
                        board.boardList.totalCount = boardList[0].totalCount; // 총 건수
                    };
                    drawPagination(lstCnt);
                    var markup ="";    // mark 로직 작성
                    $("#event_div").html(markup);
                },
                error : function() {
                    alert('게시판 조회 중 오류가 발생했습니다.');
                }
            });
        },
        param : {
            pageNumber : 1,
            pageSize : lstCnt
        },
        totalCount : 0
    };
 
//페이징을 설정하고 페이징 영역에 화면에 그리는 함수
function drawPagination(lstCnt){
    $("#boardPagingDiv").pagination({
       items: board.boardList.totalCount,
       currentPage : board.boardList.param.pageNumber,
       itemsOnPage: lstCnt, // 설정 안할 경우 10
       displayedPages : lstCnt, // 설정 안할 경우 10
       selectOnClick : false, // 페이징 버튼을 눌렀을 때 자동으로 페이징을 다시 그릴지 여부 (기본값은 true)
       onPageClick: function(currentPage){ // 페이징 버튼을 눌렀을 때 이벤트 바인딩
           searchBoardListPaging(currentPage); // 페이징 버튼을 눌렀을 때 다시 비동기로 데이터를 가져와 화면과 페이징을 그립니다.
       }
   });
}
 
// 페이징 번호 눌렀을때 함수
function searchBoardListPaging (page) {
    board.boardList.param.pageNumber = Number(page);
    board.boardList.data();
    drawPagination(lstCnt);
}

pageNumber, pageSize, totalCount 를 통해 

페이징 영역을 그리고, 페이징 번호를 눌렀을때 

선택한 페이징번호와 페이지사이즈를 가지고 데이터를 다시 가져오는 것을 확인할 수 있다.