Implementation Code of the asp.net pager Control

This article uses a detailed implementation to introduce the usage of the asp.net pager page control. If you need it, you can refer to how this article operates and optimize it.

This code is the core function of the pager page control.

The Code is as follows:

Copy code

$. 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'> homepage </span> <span id = '_ pre' class = 'spcial'> previous page </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 page </span> <span id =' _ la' class = 'spcial'> last page </ span> </span> <input id = '_ tot' type = 'den den'/> "); 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 ); } }); } } } } } });

Below is a simple pager paging css style

 

The Code is as follows:	Copy code
# _ Pos { Width: 40px; } . Unable { Color: # BCC0BB; } . Number { Margin: 2px; Color: # 0000FF; Text-decoration: underline; } . Selected { Margin: 2px; Color: # FF0000; Font-weight: bold; }

And this calls an html file of pager pagination.

 

The Code is as follows:

Copy code

<! 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>

Scf file,

 

The Code is as follows:

Copy code

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 ;} } }