Effect:
Js:
Copy codeThe Code is as follows: $. 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 );
}
});
}
}
}
}
}
});
Css:Copy codeThe Code is as follows: # _ pos {
Width: 40px;
}
. Unable
{
Color: # BCC0BB;
}
. Number
{
Margin: 2px;
Color: # 0000FF;
Text-decoration: underline;
}
. Selected
{
Margin: 2px;
Color: # FF0000;
Font-weight: bold;
}
Html:Copy codeThe 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:Copy codeThe 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
{
[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 ;}
}
}