jquery Implementation Pager Control Sample

  This article mainly introduces the jquery implementation pager Control example, need friends can refer to the following

JS:     Code as follows: $.fn.extend ({jpager:function (cfg, PageIndex, pageSize) {    if (CFG && page Index > 0 && pagesize>0) {        var token = "#" + this.attr ("id");     &NBS P   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);        }; &nBsp         var pagenumber = function () {          $ (token). Jpager (CFG, parseint ($ (this). Text ()), pageSize);        };           var pagego = function () {            var index = Parsei NT ($ ("#_pos"). Val ());             var total = parseint ($ ("#_tot"). Val ());             if (index) {                if (Index & Gt Total) {                    $ (token). Jpager (CFG, total, pageSize);                                 ELSE if (Index < 1) {                    $ (token). Jpager (CFG, 1, pageSize);                 &nbsp        ;       Else {                    $ (token). Jpager (CFG, index, pageSize);                            }        };         var checkgonumber = function () {          if (! Number (This.value)) {                this.value = "";                         else {        & nbsp       This.value = number (this.value);            }        };         var initcustomer = function (recordCount) {            if (CFG). Customer) {                if (cfg.customer.template) {      &NBS P             var t = cfg.customer.template;                     t = t.replace (/%total%/gi, Math.ceil (recordcount/p agesize). Replace (/%current%/gi, PageIndex). Replace (/%recordcount%/gi, recordCount). Replace (/%pagesize%/gi, PageSize);                     if (cfg.customer.position = "right") {  &NBSP ;                     $ ("#_right"). After (t);                                   & nbsp     Else {                        $ ("#_left"). befor E (t);                                   & nbsp {           }        };          var changestate = function (total) {            if (PageIndex = 1) {                $ ("#_first"). attr ("Class", "unable");                 $ ("#_pre") attr ("Class", "unable");                         else {        & nbsp       $ ("#_first"). Bind ("click", Pagefirst). attr ("Class", "number");                 $ ("#_pre") Bind ("click", Pagepre). attr ("Class", "number");                         if (PageIndex = total) {  &NB Sp             $ ("#_last"). attr ("Class", "unable");                 $ ("#_next") attr ("Class", "unable");                       &NBsp 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 (curr ent > Total) {                   , total;     &NB Sp           {                var Endindex = Total;                 var startIndex = 1;                 var temp = current + Math.floor (COUNT/2);                 if (temp < total) {     ,       & nbsp       if (Temp < count) {                      & nbsp Endindex = count;                                   & nbsp     Else {                        StartIndex = Temp -Count + 1;                         Endindex = temp;                                   & nbsp }             &NBsp   Else {                    if (Total > Count) {                        StartIndex = total-count + 1;                                   & nbsp }                 $ ("#_number"). empty ();                 for (var i = StartIndex i <= endindex i++) {    &N Bsp               var html = $ ("<span></span>"). Text (i). bind ("click", Pagenumb ER);                     if (i = = current) {        &NBS P               $ ("#_number") Append (html.attr ("Class", "Selected"));                     &N  Bsp                 else {                &NB Sp       $ ("#_number"). Append (Html.attr ("Class", "number"));                                   & nbsp {           }        };           var initpager = function (data) {            $.isarr Ay (data. SearchResult) && data. RecordCount > 0) {                $ (token) Append ("<span id= ' _left ' ><" Span id= ' _first ' class= ' spcial ' > Home </span> <span id= ' _pre ' class= ' spcial ' > previous page </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 ' > Next </span> <span id= ' _last ' class= ' spcial ' > last page </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) {    &N Bsp               Initnumber (total, Cfg.count, pageIndex);                                 Initcust Omer (data. RecordCount);         &nbsp  }        };           if (cfg.action) {            if (Cfg.action.url &&am) P Cfg.action.data) {                var d = cfg.action.data.substr (0, Cfg.action.da Ta.lastindexof ("}")) + ', ' pageIndex ': ' + PageIndex + ', ' pageSize ': ' + pageSize + '} ';                 if (cfg.action.callback && $.isfunction Cfg.action.callba CK) {                    $.ajax {          & nbsp             type: "Post",                   &NB Sp     Url:cfg.action.url,                         DAT Atype: "JSON",                         ContentType: "Text/json ",                         DATA:D,                         success:function (data) {          &NBS P                 Initpager (DATA.D);                             Cfg.action.callback (data . d);                                   & nbsp        });                                 else {& nbsp                   $.ajax ({              & nbsp         type: "Post",                       &NB Sp Url:cfg.Action.url,                         DataType: "JSON",   & nbsp                     ContentType: "Text/json",       &NBSP ;                 DATA:D,                 & nbsp       Success:function (data) {                    &NBS P       Initpager (DATA.D);                                   & nbsp        });                            }        }    }}});     CSS:       Code as follows: #_pos {    width:40px; unable {    color: #BCC0BB; }. Number {   MARGIN:2PX;     color: #0000FF;     text-decoration:underline; } selected {    margin:2px;     color: #FF0000; &nbs P   Font-weight:bold; }     HTML:     code is as follows: <! 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> Paging Control Example </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:   code is as follows: 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     {&nbs P       [OperationContract]         [WebInvoke]         public pageob Ject<person> getpersons (String name,int pageindex,int pasesize)         {      & NBsP     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> SEARCHR Esult {get; set;}    }}