Copy codeThe Code is as follows:
/**
* <P> pagination. js
* <P> General AJAX-based paging class
* @ Author jeanwendy
* @ Version 1.0
*/
Var paginationIndex = 0;
Var pagination = function (trTemplatId ){
$ (). AjaxStart (function (){
$. BlockUI ({
Message: '<table> <tr> <td style = "vertical-align: bottom"> <font size = 2pt> load data. Please wait... </font> </td> </tr> </table>'
});
}). AjaxStop ($. unblockUI );
PaginationIndex = paginationIndex + 1;
This. id = paginationIndex;
This. trTemplatId = trTemplatId;
This. pageNo = 1;
This. pageSize = 10;
This. beforeQuery = null;
This. afterQuery = null;
This. url = null;
This. params = null;
This. templat = null;
This. childrenCount = null;
This. setPageNo = function (pageNo ){
If (pageNo! = Null)
This. pageNo = pageNo;
}
This. setPageSize = function (pageSize ){
If (pageSize! = Null)
This. pageSize = pageSize;
}
This. setBeforeQuery = function (fn ){
This. beforeQuery = fn;
}
This. setAfterQuery = function (fn ){
This. afterQuery = fn;
}
This. load = function (url, params ){
// Initialization (only executed during the first query)
If (this. templat = null & this. childrenCount = null ){
Var templatObj = $ ('#' + this. trTemplatId );
TemplatObj. parent (). attr ('id', 'tbody _ id' + this. id );
TemplatObj. removeAttr ('id ');
TemplatObj. wrap ("<div id = 'divtemplat'> </div> ");
This. templat = require ('{divtemplat'{.html ();
$ ('# DivTemplat'). remove ();
This. childrenCount = $ ('# tbody_id' + this. id). children (). size ();
}
// Start Query
This. url = url;
If (params = null) params = {};
$. Extend (params, {pageNo: this. pageNo, pageSize: this. pageSize });
This. params = params;
Var thisObj = this;
Var options = {
Url: url,
Data: params,
Async: false, // synchronous request
Type: 'post ',
DataType: 'json ',
Error: function (xmlhttp, errInfo, e) {// request error handling: for example, 404
If (xmlhttp. status = 200) alert ('You have not visited the website for a long time. Please exit and log on again! ');
Else alert ('error occurred when requesting background services: '+ xmlhttp. status );
},
Success: function (data ){
// Delete the last data
$ ('# Tbody_id' + thisObj. id). children (). filter (': gt (' + (thisObj. childrenCount-1) + '). remove ();
ThisObj. pageList (data. data );
ThisObj. pageBar (data. total );
If ($. isFunction (thisObj. afterQuery) thisObj. afterQuery ();
}
};
If ($. isFunction (this. beforeQuery) this. beforeQuery ();
$. Ajax (options); // send a request
}
This. pageList = function (data ){
Var filedArr = this. templat. match (// {[A-Za-z0-9 _] + \}/ig );
For (var I = 0; I <data. length; I ++ ){
Var thisTemplat = this. templat;
For (var j = 0; j <filedArr. length; j ++ ){
Var key = filedArr [j]. substring (1, filedArr [j]. length-1 );
If (key = 'no _ ') {// Serial Number ID
Var value = (this. pageNo-1) * this. pageSize + I + 1;
ThisTemplat = thisTemplat. replace (new RegExp ('\ {' + key + '\}', 'G'), value );
} Else {
Var value = data [I] [key];
If (typeof (value )! = "Undefined" & value = null) value = '';
ThisTemplat = thisTemplat. replace (new RegExp ('\ {' + key + '\}', 'G'), value );
}
}
$ (ThisTemplat). appendTo ($ ('# tbody_id' + this. id ));
}
}
This. pageBar = function (total ){
Var templatObj = $ (this. templat );
Var delChildren = templatObj. children (': gt (0 )');
DelChildren. remove ();
TemplatObj. children (). attr ('colspan ', $ (this. templat). children (). size ());
TemplatObj. children (). attr ('align ', 'right ');
Var pageCount;
If (total % this. pageSize = 0) pageCount = total/this. pageSize;
Else pageCount = parseInt (total/this. pageSize) + 1;
If (pageCount = 0) pageCount = 1;
Var toolbar = "this. pageNo +"/"+ pageCount +" Page ("+ total +" Records )";
If (this. pageNo = 1) toolbar = toolbar + "Homepage ";
Else toolbar = toolbar + "<a href ='' id = 'firstpage "+ this. id + "'> homepage </a> <a href ='' id = 'prepage "+ this. id + "'> previous page </a> ";
If (this. pageNo = pageCount) toolbar = toolbar + "the last page of the next page ";
Else toolbar = toolbar + "<a href ='' id = 'nextpage "+ this. id + "'> next page </a> <a href ='' id = 'lastpage "+ this. id + "'> last page </a> ";
Toolbar = toolbar + "<input style = 'text-align: center; width: 25px; height: 20px; border: 1 solid black 'Type = 'text' id = 'pagesize "+ this. id + "'value =" + this. pageSize + "/> entries ";
Toolbar = toolbar + "<input style = 'text-align: center; width: 25px; height: 20px; border: 1 solid black 'Type = 'text' id = 'pageno "+ this. id + "'value =" + this. pageNo + "/> ";
Toolbar = toolbar + "<input style = 'height: 20px; border: 1 solid black 'id = 'gopage" + this. id + "'Type = 'button 'value = 'Go'> ";
TemplatObj.children().html (toolbar );
$ (TemplatObj. wrap ("<div> </div>" pai.parent().html (). appendTo ($ ('# tbody_id' + this. id ));
Var thisObj = this;
$ ('# FirstPage' + thisObj. id). click (function (){
ThisObj. pageNo = 1;
ThisObj. load (thisObj. url, thisObj. params );
Return false;
});
$ ('# Prepage' + thisObj. id). click (function (){
ThisObj. pageNo = parseInt (thisObj. pageNo)-1;
ThisObj. load (thisObj. url, thisObj. params );
Return false;
});
$ ('# NextPage' + thisObj. id). click (function (){
ThisObj. pageNo = parseInt (thisObj. pageNo) + 1;
ThisObj. load (thisObj. url, thisObj. params );
Return false;
});
$ ('# LastPage' + thisObj. id). click (function (){
ThisObj. pageNo = pageCount;
ThisObj. load (thisObj. url, thisObj. params );
Return false;
});
$ ('# PageSize' + thisObj. id). keydown (function (e ){
If (e. keyCode = 13 ){
Var v = $ ('# pageSize' + thisObj. id). val ();
If (! IsIntGreatZero (v) | v = '0 '){
Alert ('the number of entries you entered is invalid. Please enter it again! ');
$ ("# PageSize" + thisObj. id). focus ();
Return;
}
If (v> 200 ){
Alert ('the number of entries displayed in your input is too large. Please try again! ');
$ ("# PageSize" + thisObj. id). focus ();
Return;
}
ThisObj. pageNo = 1;
ThisObj. pageSize = v;
ThisObj. load (thisObj. url, thisObj. params );
}
});
$ ('# PageNo' + thisObj. id). keydown (function (e ){
If (e. keyCode = 13 ){
$ ('# Gopage' + thisObj. id). triggerHandler ('click ');
}
});
$ ('# Gopage' + thisObj. id). click (function (){
Var v = $ ('# pageNo' + thisObj. id). val ();
If (! IsIntGreatZero (v) | v = '0 '){
Alert ('the number of pages you entered is invalid. Please try again! ');
$ ("# PageNo" + thisObj. id). focus ();
Return;
}
If (v> pageCount ){
Alert ('the number of pages you entered exceeds the total number of pages. Please try again! ');
$ ("# PageNo" + thisObj. id). focus ();
Return;
}
ThisObj. pageNo = v;
ThisObj. load (thisObj. url, thisObj. params );
});
}
}
// True if the string is empty
Var isEmpty = function (text ){
Var isEmpty = true;
For (var I = 0; I <text. length; I ++ ){
If (text. charAt (I )! = ''){
IsEmpty = false;
Break;
}
}
Return isEmpty;
}
// True if the string is int and great than zero or equals zero
Var isIntGreatZero = function (str ){
If (isEmpty (str ))
Return false;
Var temp1 = true;
Var temp2 = '20140901 ';
For (var I = 0; I <str. length; I ++ ){
Var c = str. charAt (I );
If (temp2.indexOf (c) =-1 ){
Temp1 = false;
Break;
} Else {
If (c = '0' & I = 0 & str. length> 1 ){
Temp1 = false;
Break;
}
}
}
Return temp1;
}