jquery實作pager控制項範例_jquery

js：

複製程式碼 程式碼如下:

$.fn.extend({ JPager: function (cfg, pageIndex, pageSize) {
    if (cfg && pageIndex > 0 && pageSize>0) {        this.empty();
        var pageFirst = function () {        }; 🎜 >
        var pagePre = function () {
            
        var pageLast = function () {
            $(token).JPager(cfg, parseInt($("#_tot").val()), pageSize);
   unction () {
$ (token).JPager(cfg, pageIndex 1, pageSize);
        };

      ken).JPager(cfg, parseInt($($) ( this).text()), pageSize);
        };

        var pos").val()) ;
            var total = parseInt($("#_tot").val());
          if (索引> 總計) {
                   $(至肯).JPager ( cfg, 總計, pageSize);
                }
        1) {
                    $(token).JPager(cfg, 1,            其他{
                           }
            }
        };
       Number(this.value)) {
                this.value = "";
          else {
                this.value = Number(this.value);
          ;
        var initCustomer = function (recordCount) {
            late) {
                    var t = cfg.custom呃.模板;
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").after(t);
                   }
    {
                        $("#_left").before(t);
                   }
                }
            }
        };

        var changeState = 函數（總共）{
if (pageIndex == 1) {
                $("#_first").attr("class", r("class", "無法“）;
}
else {
$（“ #_ first”）。bind（“ click”，pagefirst）.ATTR（“ class”，“ number”）;
$（“ ＃            $("#_last" ). attr（“ class”，“ cosse”）;
$（“ #_ next”）。 “ #_最後” ).bind("click", pageLast).attr("class", "number");
                $("#_next").bind("click. class", "number ");
            }
        };
        if (總計 >; 0 && 統計 > 0) {
                若（目前                }
                若（目前 >總計）{
                  }
                var endIndex = 總計;
                var startIndex = 1;
               var temp = 當前Math.floor(count / 2);
                if (temp                     if (溫度                        endIndex =                其他{
                                 endIndex = temp;
               }
                其他{
                    if (總計> 數) {
        >                    }
             _number").empty();
                 for (var i = startIndex; i                    var html = $("                       <sup>$("#_number").append(       }
                    其他{
    ) .append(html.attr("class", "number"));
                    }        };

        var initPager = function (data) {
                    $(token).append("首頁  上一頁    下頁  末頁 ");
                var Total  $("#_tot"). val(總計);
                $("#_pos").bind("blur“，checkgonumber）;
$（“#_ to”）。 🎜>
更改狀態（總計）;
if（cfg.shownumber && cfg.count＆gt＆gt ; 0) {
                      }
                ininitCustomer(資料.RecordCount);
            }
        };
               var d = cfg.action.data.substr(0, cfg.action.data.lastIndexOf("}") ) ',"pageIndex":'pageIndex',"pageSize":'pageSize "}";
   action.callback && $.isFunction(cfg.action.callback)) {
                    $.ajax ({
                      類型：“post”，
                      url：cf g.action.url，
                        數據類型： “json”，
                        contentType: d,
                        成功：函數（資料）{                           回調。              }
                else {
                         type: "post",
                                dataType: "json",
                 json",
                        data: d,
    (data) {
                                }
                    });        }
    }
}
});



css：</sup>

複製程式碼

程式碼如下:__pos>_Dis> : 40px;}.unable{

    color: #BCC0BB;

}
.number{ 0000FF;
    text-decoration:underline;
}
.selected
{
    margin: 2px; ; 🎜 >}



html：




複製代碼


代碼如下:

   

                        $(function () {       :{ template:"%cuRRent%"},count: 10, action: { url: "Service/JService.svc/GetPersons", data: '{"name":"zhoulq"}'}, showNumber: true },1, 5);        });           

　　
wcf：












程式碼如下:

使用System;
使用System.Collections.Generic;
使用System.Linq;
使用System.Runtime.Serialization;
使用System.ServiceModel;使用System.ServiceModel.Web;
命名空間JPlugin

{
    [ServiceContract]
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRe       [OperationContract]
        [WebInvoke ]
        public PageObject; GetPersons(string name,int pageIndex,int paseSize)
        {
＠ ult = new List() {new Person(){Name="zhpulq ",年齡= 28},new Person(){姓名= "zhouxy",年齡= 24}};
        }
    }    }

    public class PageObject
    {

        public int RecordCount { get;放; }

        公開列表;搜索結果{獲取;放; }
    }
}