javascript - Pagination, Page (페이징)

 

//--------------------------------------------------

// 스크립트

//--------------------------------------------------

// Pagination

function Pagination() {

    this.data = {

        pageTagId: "#paging",

        currentPage: 1,

        pageSize: 10, //페이지 갯수 1|2|3|4|5

        listCount: 10, //아이템 Count

        totalCnt: 0,

        totalPageCnt: 0

    };

    this.pageCallback = function (pageNum) { };

}

Pagination.prototype.makePage = function (divPageId, totalCnt, listCount, pageSize, currentPage) {

    this.data.pageTagId = "#" + divPageId;

    this.data.currentPage = currentPage;

    this.data.totalCnt = totalCnt;

    this.data.listCount = listCount;

    this.data.pageSize = pageSize;

    this.setPagingHtml();

};

Pagination.prototype.gotoPage = function (e) {

    var thisObj = e.data.obj;

    var pageNum = e.currentTarget.getAttribute("data-pagenum");

    thisObj.data.currentPage = pageNum; //입력받은 페이지번호를 현재페이지로 설정

    thisObj.pageCallback(pageNum);

    scroll(0, 0);

    return false;

};

Pagination.prototype.setPagingHtml = function () {

    var _ = this;

    if (_.data.totalCnt == 0) {

        $(this.data.pageTagId).html("");

        return "";

    }

    //총페이지수 구하기 : 페이지 출력 범위 (1|2|3|4|5)

    _.data.totalPageCnt = Math.ceil(_.data.totalCnt / _.data.listCount);

    var n_block = Math.ceil(_.data.currentPage / _.data.pageSize);

    //페이징의 시작페이지와 끝페이지 구하기

    var s_page = (n_block - 1) * _.data.pageSize + 1; // 현재블럭의 시작 페이지

    var e_page = n_block * _.data.pageSize; // 현재블럭의 끝 페이지

    var sb = '';

    var sbTemp = '';

    //이전 페이지셋으로

    var prePageOfPageList = parseInt(_.data.currentPage) - 1; // 이전 페이지 리스트 시작

    if (prePageOfPageList < 1) {

        sb += '<a href="#" class="btn_prev_paging" onclick="return false;"><span class="hidden">이전 페이지</span></a> ';

    }

    else {

        sb += '<a href="#" class="btn_prev_paging" data-pagenum="' + prePageOfPageList + '" ><span class="hidden">이전 페이지</span></a> ';

    }

    // 블럭의 페이지 목록 및 현재페이지 강조

    for (var j = s_page; j <= e_page; j++) {

        if (j > _.data.totalPageCnt) {

            break;

        }

        if (j == _.data.currentPage) {

            sbTemp += '<a href="#" onclick="return false;" class="on">' + j + '</a> ';

        } else {

            sbTemp += '<a href="#" data-pagenum="' + j + '">' + j + '</a> ';

        }

    }

    sb += sbTemp;

    //다음페이지셋으로

    var nextPageOfPageList = parseInt(_.data.currentPage) + 1; // 다음 페이지 리스트 시작

    if (nextPageOfPageList > _.data.totalPageCnt) {

        sb += '<a href="#" class="btn_next_paging" onclick="return false;"><span class="hidden">다음 페이지</span></a>';

    }

    else {

        sb += '<a href="#" class="btn_next_paging" data-pagenum="' + nextPageOfPageList + '"><span class="hidden">다음 페이지</span></a>';

    }

    var $divPage = $(this.data.pageTagId);

    $divPage.html(sb);

    $divPage.find('a[data-pagenum]').on("click", { obj: this }, this.gotoPage);

};

//--------------------------------------------------

// 활용#1

//--------------------------------------------------

    var pager = new Pagination();

    //Set Pager

    $('#pageNo').val('@ViewBag.PageNo');

    $('#pageSize').val('@ViewBag.PageSize');

    pager.pageCallback = function (num) {

        $('#pageNo').val(num);

        // 해당 데이터 가지고 오기 //reSearch();

    };

    pager.makePage('pager', totalSize, $('#pageSize').val(), 5,  $('#pageNo').val());

[HTML]

    <input type="hidden" id="pageSize" value="10" />

    <input type="hidden" id="pageNo" value="1" />

    <div id="pager" class="paging"></div>

[CSS]

/* 페이징(페이지네이션, 페이지) */

.paging {

    margin: 0 auto;

    text-align: center

}

    .paging a {

        display: inline-block;

        padding: 6px 9px 0 11px;

        font-size: 12px;

        font-weight: bold;

        line-height: 15px;

        color: #555;

        vertical-align: top

    }

        .paging a.on {

            color: #ff534e

        }

        .paging a.btn_prev_paging {

            margin-right: 4px;

            padding: 0;

            width: 31px;

            height: 31px;

            background: url('btn_prev_paging.gif') no-repeat 0 0

        }

        .paging a.btn_next_paging {

            margin-left: 4px;

            padding: 0;

            width: 31px;

            height: 31px;

            background: url('btn_next_paging.gif') no-repeat 0 0

        }

//--------------------------------------------------

// 활용#2

//--------------------------------------------------

<script type="text/javascript">

    var _Listpager;

    $(document).ready(function () {

        _Listpager = new Pagination();

        _Listpager.pageCallback = bindList;

        bindList(1);

    });

    function bindList(page) {

        $.ajax({

            url: "@Url.Action("GetDataLists", "Event")",

            async: true,

            type: "POST",

            contentType: "application/json",

            data: "{page: " + page + "}",

            success: function(result) {

                var cnt = result.TotalCount;

                var htmlStr = new Array();

                if (result.List != null) {

                    for (var idx = 0; idx < result.List.length; idx++) {

                        var item = result.List[idx];

                        htmlStr.push('<li>...</li>');

                    }

                }

                $("#ulList").html(htmlStr.join(''));

                _Listpager.makePage("Listpager", cnt, 10, 5, page);

            },

            error: function() {

                alert("이벤트 조회 실패");

            }

        });

    }

</script>

}

<div class="list">

<ul id="ulList"></ul>

</div>

<div id="Listpager" class="paging"></div>