.NET MVC] 페이징(pagination)

[Class]

public class Paging

    {

        /// <summary>

        /// 현재 페이지 번호

        /// </summary>

        public long CurrentPageNumber { get; set; }

        /// <summary>

        /// 총 페이지 갯수

        /// </summary>

        public long TotalPage { get; set; }

        /// <summary>

        /// 시작 페이지 번호

        /// </summary>

        public long StartPageNumber { get; set; }

        /// <summary>

        /// 끝 페이지 번호

        /// </summary>

        public long EndPageNumber { get; set; }

        /// <summary>

        /// uri

        /// </summary>

        public string Uri { get; set; }

        /// <summary>

        /// 쿼리 문자열

        /// </summary>

        public string QueryString { get; set; }

        /// <summary>

        /// 쿼리 문자열(ajax)

        /// </summary>

        public string QueryStringByAjax { get; set; }

        /// <summary>

        /// 페이징 처리를 한다.

        /// </summary>

        /// <param name="totalRows">총 행의 수</param>

        /// <param name="pageSize">한 페이지에 출력할 행의 수</param>

        /// <param name="currentPage">현재 페이지 번호</param>

        /// <param name="blockSize">페이징수</param>

        public Paging(long totalRows, long pageSize, long currentPage, long blockSize)

        {

            long totalPage = (long)Math.Ceiling((double)totalRows / pageSize);

            long currentPageBlock = (long)Math.Ceiling((double)currentPage / blockSize);

            long startPageNumber = ((currentPageBlock - 1) * blockSize) + 1;

            long endPageNumber = (startPageNumber + blockSize) - 1 <= totalPage ? (startPageNumber + blockSize) - 1 : totalPage;

            this.CurrentPageNumber = currentPage;

            this.TotalPage = totalPage;

            this.StartPageNumber = startPageNumber;

            this.EndPageNumber = endPageNumber;

        }

    }

[View]

<div id="contentsListWrapper" class="dBox2">            

            <% Html.RenderPartial("GetBuyListPV", Model); %>            

</div>

[GetBuyListPV ]

<script type="text/javascript">     

    // 페이징 번호 클릭시 호출되는 함수.

    function getContents(currentPage) {        

        $.ajax({

            url: '/My/GetBuyList'

            , data: { currentPage: currentPage }

            , type: "POST"

            , beforeSend: function() {

                $(".ui-loader").show();

            }

        }).success(function(a, b, c) {            

            $("#contentsListWrapper").empty();

            $("html, body").animate({ scrollTop: 0 }, "slow");

            $("#contentsListWrapper").html(a);

            $('#contentsList').listview().listview('refresh');

            $(".ui-loader").hide();            

        }).error(function(a, b, c) {

            $(".ui-loader").hide();

            alert(c);

        });        

    }

</script>

<% Html.RenderPartial("Pagination", ViewData["Paging"]); %>

[Pagination]

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<TOTO_DISK.Entity.Paging>" %>

<%    

    long previousNumber = Model.CurrentPageNumber > 1 ? Model.CurrentPageNumber - 1 : 1;

    long nextNumber = Model.CurrentPageNumber < Model.TotalPage ? Model.CurrentPageNumber + 1 : Model.TotalPage;

    

    bool isPrevious1 = Model.CurrentPageNumber > 1 ? true : false;

    bool isPrevious5 = Model.CurrentPageNumber > 5 ? true : false;

    string previewCss1 = isPrevious1 ? "btn_prev_on" : "btn_prev";

    string previewCss5 = isPrevious5 ? "btn_prev_on2" : "btn_prev2";

    bool isNext1 = Model.CurrentPageNumber < Model.TotalPage ? true : false;

    bool isNext5 = Model.CurrentPageNumber <= (Model.TotalPage - 5) ? true : false;

    

    string nextviewCss1 = isNext1 ? "btn_next_on" : "btn_next";

    string nextviewCss5 = isNext5 ? "btn_next_on2" : "btn_next2";

%>

<div class="list_paging">

    <div class="inner_paging">

   

   <!-- previous -->

   <a id="previous5" data-pagenumber="<%=(previousNumber - 4)%>"><span class="ico0_all <%=previewCss5%>">맨처음페이지</span></a>

   <a id="previous" data-pagenumber="<%=previousNumber%>"><span class="ico_all <%=previewCss1%>">이전페이지</span></a>    

   <!-- previous -->

   

   <span class="count_page">

       <ul>

       <% for (long i = Model.StartPageNumber; i <= Model.EndPageNumber; i++) { %>

                <% if(Model.CurrentPageNumber == i) { %>

                    <li class="on"><%= i %></strong></li>

                <% } else { %>

                    <li><a name="pageNumber" data-pagenumber="<%=i%>"><%= i %></a></li>

                <% } %>

            <% } %>            

            </ul>

        </span>

        

        <!-- next -->

        <a id="next" data-pagenumber="<%=nextNumber%>"><span class="ico_all <%=nextviewCss1%>">다음페이지</span></a>        

        <a id="next5" data-pagenumber="<%=(nextNumber + 4)%>"><span class="ico_all <%=nextviewCss5%>">맨마지막페이지</span></a>

        <!-- next -->

        

    </div>

</div>

<script type="text/javascript">

    $(function() {

        // 페이징 클릭 이벤트(번호)

        $("a[name='pageNumber']").on("click", function() {

            getContents($(this).data("pagenumber"));

        });

        // 페이징 클릭 이벤트(previous) - 1

        $("#previous").on("click", function() {

            var isPrevious1 = "<%= isPrevious1 %>";

            if (isPrevious1 === "True") {

                getContents($(this).data("pagenumber"));

            }

        });

        // 페이징 클릭 이벤트(previous) - 5

        $("#previous5").on("click", function() {

            var isPrevious5 = "<%= isPrevious5 %>";

            if (isPrevious5 === "True") {

                getContents($(this).data("pagenumber"));

            }

        });

        // 페이징 클릭 이벤트(next) + 1

        $("#next").on("click", function() {

            var isNext1 = "<%= isNext1 %>";

            if (isNext1 === "True") {

                getContents($(this).data("pagenumber"));

            }

        });

        // 페이징 클릭 이벤트(next) + 5

        $("#next5").on("click", function() {

            var isNext5 = "<%= isNext5 %>";

            if (isNext5 === "True") {

                getContents($(this).data("pagenumber"));

            }

        });

    });

</script>