티스토리 뷰

카테고리 없음

.NET MVC] 페이징(pagination)

James Wetzel 2015. 10. 27. 09:42

[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>

공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
«   2024/03   »
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
글 보관함