페이저 제어의 jquery 구현 example_jquery

js:

코드 복사 코드는 다음과 같습니다.

$.fn.extend({ JPager: function (cfg, pageIndex, pageSize) {
    if (cfg && pageIndex > 0 && pageSize>0) {
        var token = "#" this.attr("id");
        this.empty();
        var pageFirst = function () {
            $(token).JPager(cfg, 1, pageSize);
        };

        var pagePre = function () {
            $(token).JPager(cfg, pageIndex - 1, pageSize);
        };

        var pageLast = function () {
           $(token).JPager(cfg,parseInt($("#_tot").val()), pageSize);
        };

        var pageNext = function () {
            $(token).JPager(cfg, pageIndex 1, pageSize);
        };

        var pageNumber = function () {
            $(token).JPager(cfg, parseInt($( this).text()), pageSize);
        };

        var pageGo = function () {
            var index =parseInt($("#_pos").val());
            var total =parseInt($("#_tot").val());
            if (색인) {
              if (index > total) {
                  $(to 켄).JPager( cfg, total, pageSize);
               }
               else if (index                    $(token).JPager(cfg, 1, pageSize);
              }
              else {
                   $(token).JPager(cfg, index, pageSize);
                }
           }
        };
        var checkGoNumber = function () {
           if (!Number(this.value)) {
               this.value = "";
            }
else {
               this.value = 숫자(this.value);
            }
        };
        var initCustomer = function (recordCount) {
            if (cfg.customer) {
              if (cfg.customer.template) {
                   var t = cfg. customer.template;
                    t = t.replace(/%total%/gi, Math.ceil(recordCount / pageSize)).replace(/%current%/gi, pageIndex).replace(/%recordCount%/gi, RecordCount).replace(/% pageSize%/gi, pageSize);
                   if (cfg.customer.position == "right") {
                    $("#_right").after(t);
                   }
                    그 외 {
                      $("#_left").before(t);
                  }
               }
            }
        };

        varchangeState = 함수(전체) {
if (pageIndex == 1) {
                $("#_first").attr("class", "unable");
               $("#_pre").attr("class", "unable" );
            }
            else {
             $("#_first").bind("click", pageFirst).attr("class", "number");
              $("# _pre ").bind("click", pagePre).attr("class", "number");
           }
            if (pageIndex == total) {
              $("#_last").attr ("클래스", "불가능");
               $("#_next").attr("클래스", "불가능");
           }
           else {
               $("#_ 마지막" ).bind("click", pageLast).attr("class", "number");
               $("#_next").bind("click", pageNext).attr("class", "number" ");
            }
        };
        var initNumber = 함수(전체, 개수, 현재) {
            if (전체 > 0 && 개수 > 0) {
                if (현재                   현재 = 1;
               }
               if (현재 > 전체) {
                   현재 = 합계;
                }
               var endIndex = total;
               var startIndex = 1;
               var temp = 현재 Math.floor(개수 / 2);
               if (temp < ; 총) {
                   if (temp < ; 개수) {
                      endIndex = 개수;
                 }
                 그 외 {
                      startIndex = 임시 - 개수 1;
                      endIndex = temp;
                 }
                             el 그래요 {
                   if (총합 > 개수) {
                     startIndex = 총 - 개수 1;
                 }
                }
                $("#_number").empty();
                for (var i = startIndex; i                   var html = $("").text(i).bind("click", pageNumber);
                   if (i == 현재) {
                     $("#_number").append(html.attr("class", "selected"));
                   }
                    그밖에 {
                      $( "#_number").append(html.attr("class", "number"));
                  }
              }
           }
        };

        var initPager = function (data) {
           if ($.isArray(data.SearchResult) && data.RecordCount > 0) {
               $(token).append("首页  上一页 범위>    下一页  末页 ");
               var total = Math.ceil(data.RecordCount / pageSize);
              $("#_tot").val(total);
              $("#_pos").bind(" Blur", checkGoNumber);
               $("#_to").bind("click", pageGo);

              changeState(total);
               if (cfg.showNumber && cfg.count > ; 0) {
                  initNumber(total, cfg.count, pageIndex);
              }
              initCustomer(data.RecordCount);            }
        };

        if(cfg .action) {
            if (cfg.action.url && cfg.action.data) {
               var d = cfg.action.data.substr(0, cfg.action.data.lastIndexOf("}") ) ',"pageIndex":' pageIndex ',"pageSize":' pageSize "}";
               if (cfg.action.callback && $.isFunction(cfg.action.callback)) {
                  $.ajax ({
                      유형: "게시물",
                     url: cfg.action.url,
                     dataType: "json",
                       contentType: "text/json",
                      데이터: d,
                      성공: 함수(데이터) {
                         initPager(data.d);
                          cfg.action .callback(data.d);
                       }
                  });
               }
                                                                 url: cfg.action.url,
dataType: "json",
contentType: "text/ json",
데이터: d,
성공: 함수(데이터) {
initPager(data.d);
               }
                    ) > }
}
}
});



css:

코드 복사

코드는 다음과 같습니다.#_pos { 너비: 40px;}.unable

{

색상: #BCC0BB;
}
.number
{
여백: 2px;
색상:# 0000FF;
텍스트 장식:밑줄;
}
.selected
{
여백: 2px;
색상: #FF0000;
글꼴 두께: 굵게 ;
}



html:

코드 복사

코드는 다음과 같습니다.

 

 

　
wcf:




코드 복사

코드는 다음과 같습니다.

시스템 사용;
System.Collections.Generic 사용;
System.Linq 사용;
System.Runtime.Serialization 사용;
System.ServiceModel 사용;
시스템 사용 .ServiceModel.Activation;
System.ServiceModel.Web 사용;

네임스페이스 JPlugin
{
    [ServiceContract]
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    공개 클래스 JService
    {
        [OperationContract]
        [WebInvoke]
        공개 PageObject GetPersons(문자열 이름,int pageIndex,int paseSize)
        {
            return new PageObject(){RecordCount = 23,SearchResult = new List(){new Person(){Name="zhpulq ",Age = 28},new Person(){Name = "zhouxy",Age = 24}}};
        }
    }

    공개 클래스 PageObject
    {
        public int RecordCount { get; 세트; }
        공개 목록 검색결과 { 가져오기; 세트; }
    }
}