스크립트 페이징 처리.

jquery ajax + javascript 를 통한 페이징 처리. 

 

/* 페이징 처리 함수 */

Set_Pager = function (pageNum, totalPageCount, callBack, settings)

   {

       settings = $.extend(true,

       {

           "firstImg": "/Images/Common/btn_prev2.gif",

           "prevImg": "/Images/Common/btn_prev.gif",

           "nextImg": "/Images/Common/btn_next.gif",

           "lastImg": "/Images/Common/btn_next2.gif",

           displayCount: 10

       }, settings);

       var k = Math.floor((parseInt(pageNum) - 1) / settings.displayCount);

       if (k < 0) k = 0;

       var sIdx = k * settings.displayCount + 1,

           eIdx = (totalPageCount < (k + 1) * settings.displayCount) ? totalPageCount : (k + 1) * settings.displayCount;;

       var pagerCtr = $("#pager");

       var first = "<a href='javascript:;' act= 'first' style='padding:2px;'><img src='" + settings.firstImg + "'></a>",

           prev = "<a href='javascript:;' act= 'prev' style='padding:2px;'><img src='" + settings.prevImg + "'></a>",

           next = "<a href='javascript:;' act= 'next' style='padding:2px;'><img src='" + settings.nextImg + "'></a>",

           last = "<a href='javascript:;' act= 'last' style='padding:2px;'><img src='" + settings.lastImg + "'></a>",

           middle = "", cls;

       for (var i = sIdx; i <= eIdx ; i++)

       {

           if (parseInt(pageNum) === i)

           {

               middle += "<a href='javascript:;' style='font-weight:bold;color: #FE6418;' act='middle' pageNum= '" + i + "'>" + i + "</a>";

               pagerCtr.attr("pageNum", pageNum);

           }

           else

               middle += "<a href='javascript:;' act='middle' pageNum= '" + i + "'>" + i + "</a>";

           if (i < eIdx)

               middle += "<span class='page_bar'>|</span>";

       }

       if (parseInt(pageNum) === 1)

       {

           first = "";

           prev = ""

       }

       if (parseInt(pageNum) === totalPageCount)

       {

           next = "";

           last = "";

       }

       if (totalPageCount <= 1)

       {

           first = "";

           prev = ""

           next = "";

           last = "";

       }

       pagerCtr.addClass("list_paging").children().remove();

       $("<div class='paging_box'></div>")

           .append(first)

           .append(prev)

           .append(middle)

           .append(next)

           .append(last).appendTo($("#pager"))

       ;

       $(pagerCtr).find("a").on(

       {

           click: function ()

           {

               var _currPage = pagerCtr.attr("pageNum") === undefined ? 1 : parseInt(pagerCtr.attr("pageNum")),

                   _lastPage = parseInt(totalPageCount),

                   step = -1;

               var act = $(this).attr("act");

               switch (act)

               {

                   case "first":

                       _currPage = 1;

                       break;

                   case "prev":

                       _currPage = _currPage + step;

                       break;

                   case "next":

                       step = step * -1;

                       _currPage = _currPage + step;

                       break;

                   case "last":

                       _currPage = _lastPage;

                       break;

                   default:

                       _currPage = $(this).attr("pageNum");

                       break;

               }

               if (_currPage < 1 || _currPage > _lastPage)

               {

                   step = step * -1;

                   _currPage = _currPage + step;

               }

               /*$(pagerCtr).find("a").each(function(i)

               {

                   if ($(this).text() == _currPage)

                       $(this).removeClass("num").addClass("numOn");

                   else

                       $(this).removeClass("numOn").addClass("num");

               });*/

               pagerCtr.attr("pageNum", _currPage);

               callBack(_currPage);

               Set_Pager(_currPage, totalPageCount, callBack);

           }

       });

   };

/*자바스크립트 함수*/

GetStatusOfUse = function ()

{

var params =

{

pageNo      : $("#pager").attr("pagenum") || 1

};

$("#excelParmas").val(JSON.stringify(params));

$.ajax({

url: "url",

type: "post",

data: JSON.stringify(params),

datatype: "json",

contentType: "application/json; charset=utf-8",

success: function (response)

{

var jsonData = JSON.parse(response.d);

Set_Pager(jsonData.pageNo, jsonData.totPageCount, function () { GetStatusOfUse(); });

},

error: function (a, b, c)

{

var msg = "";

alert(msg + " : " + c);

}

});

};

/*html*/

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