Example of pager Control Implemented by jquery _ jquery

This article mainly introduces the example of jquery's pager control implementation. If you need it, refer to js:

The 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 = $ (""). 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 ("homepage Previous PageLast page");
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:

The 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:

The Code is as follows:

Paging control example