效果：

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 (index) {                  if (index > total) {                      $(token).JPager(cfg, total, pageSize);                  }                  else if (index < 1) {                      $(token).JPager(cfg, 1, pageSize);                  }                  else {                      $(token).JPager(cfg, index, pageSize);                  }              }          };          var checkGoNumber = function () {              if (!Number(this.value)) {                  this.value = "";              }              else {                  this.value = Number(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);                      }                      else {                          $("#_left").before(t);                      }                  }              }          };            var changeState = function (total) {              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("class", "unable");                  $("#_next").attr("class", "unable");              }              else {                  $("#_last").bind("click", pageLast).attr("class", "number");                  $("#_next").bind("click", pageNext).attr("class", "number");              }          };          var initNumber = function (total, count, current) {              if (total > 0 && count > 0) {                  if (current < 1) {                      current = 1;                  }                  if (current > total) {                      current = total;                  }                  var endIndex = total;                  var startIndex = 1;                  var temp = current + Math.floor(count / 2);                  if (temp < total) {                      if (temp < count) {                          endIndex = count;                      }                      else {                          startIndex = temp - count + 1;                          endIndex = temp;                      }                  }                  else {                      if (total > count) {                          startIndex = total - count + 1;                      }                  }                  $("#_number").empty();                  for (var i = startIndex; i <= endIndex; i++) {                      var html = $("<span></span>").text(i).bind("click", pageNumber);                      if (i == current) {                          $("#_number").append(html.attr("class", "selected"));                      }                      else {                          $("#_number").append(html.attr("class", "number"));                      }                  }              }          };            var initPager = function (data) {              if ($.isArray(data.SearchResult) && data.RecordCount > 0) {                  $(token).append("<span id='_left'><span id='_first' class='spcial'>首页</span> <span id='_pre' class='spcial'>上一页</span></span> <span id='_number'></span><span id='_go'><input id='_pos' type='text'/><input id='_to' type='button' value='GO'/></span> <span id='_right'><span id='_next' class='spcial'>下一页</span> <span id='_last' class='spcial'>末页</span></span><input id='_tot' type='hidden'/>");                  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({                          type: "post",                          url: cfg.action.url,                          dataType: "json",                          contentType: "text/json",                          data: d,                          success: function (data) {                              initPager(data.d);                              cfg.action.callback(data.d);                          }                      });                  }                  else {                      $.ajax({                          type: "post",                          url: cfg.action.url,                          dataType: "json",                          contentType: "text/json",                          data: d,                          success: function (data) {                              initPager(data.d);                          }                      });                  }              }          }      }  }  });  

　　

css：

#_pos {      width: 40px;  }  .unable  {      color: #BCC0BB;  }  .number  {      margin: 2px;      color:#0000FF;      text-decoration:underline;   }  .selected  {      margin: 2px;      color: #FF0000;      font-weight: bold;  }  

　　

html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>      <title>分页控件示例</title>      <link href="CSS/JPager.css" rel="stylesheet" type="text/css" />      <script src="JS/jquery.min.js" type="text/javascript"></script>      <script src="JExtension/JPager.js" type="text/javascript"></script>      <script type="text/javascript">          $(function () {                        $("#pager").JPager({ customer:{template:"%cuRRent%"},count: 10, action: { url: "Service/JService.svc/GetPersons", data: '{"name":"zhoulq"}'}, showNumber: true },1,5);          });              </script>  </head>  <body>  <table>  </table>  <div id="pager"></div>  </body>  </html>  

　　

wcf：

using System;  using System.Collections.Generic;  using System.Linq;  using System.Runtime.Serialization;  using System.ServiceModel;  using System.ServiceModel.Activation;  using System.ServiceModel.Web;    namespace JPlugin  {      [ServiceContract]      [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]      public class JService      {          [OperationContract]          [WebInvoke]          public PageObject<Person> GetPersons(string name,int pageIndex,int paseSize)          {              return new PageObject<Person>(){RecordCount = 23,SearchResult = new List<Person>(){new Person(){Name="zhpulq",Age = 28},new Person(){Name = "zhouxy",Age = 24}}};          }      }          public class PageObject<T>      {          public int RecordCount { get; set; }          public List<T> SearchResult { get; set; }      }  }