Jquery paging plug-in, jquery Paging
Jquery. mypagination. js file:
/**
*
* Jquery paging plug-in
* 1.0 zheng 2014-03-18
* 1.1 compatible URLs include # addresses. You can specify an anchor point for GoToPage (Special Requirements) 09:00:34
* 1.2 you can configure pagination entries to list the number of pages
* 1.3 Page code jump function added
* $ ('# Mypage'). scPagination (555 ,{
* PageSize: 10, // number of records displayed on each page
* MyPagerCount: 10, // Number of displayed pages
* Callback: function (page ){
* Alert ("selected page number" + page );
*}
*});
*/
$. Fn. scPagination = function (totalProperty, opts ){
Opts = $. extend ({
PageSize: 10,
MyPagerCount: 10,
Callback: function (){
}
}, Opts | {});
Return this. each (function (){
Function numPages (){
Return Math. ceil (totalProperty/opts. pageSize );
}
Function selectPage (page ){
Return function (){
CurrPage = page;
If (page <1) currPage = 1;
If (page> = numPages () currPage = numPages ();
Render ();
Opts. callback (currPage );
}
}
Function render (){
Var html = '<div class = "Page">'
+ '<Div> [Total <span class = "Total">' + totalProperty + '</span>] </div>'
+ '<A id = "page-first" href = "javascript: void (0);"> homepage </a>'
+ '<A id = "page-prev" href = "javascript: void (0);"> previous page </a> ';
Var fistPage = 1;
Var lastPage = numPages ();
If (currPage> Math. ceil (opts. myPagerCount-1)/2 ))
{
FistPage = currPage-Math.ceil (opts. myPagerCount-1)/2 );
}
If (fistPage> numPages ()-opts. myPagerCount + 1)
{
FistPage = numPages ()-opts. myPagerCount + 1;
}
If (fistPage <1) fistPage = 1;
LastPage = opts. myPagerCount + fistPage-1;
If (lastPage> numPages () lastPage = numPages ();
For (I = fistPage; I <= lastPage; I ++ ){
// If (currPage + I <= numPages () & currPage + I> 0 ){
Html + = '<a href = "javascript: void (0);" class = "NumPage">' + I + '</a> ';
//}
}
Html + = '<a id = "page-next" href = "javascript: void (0);"> next page </a>'
+ '<A id = "page-last" href = "javascript: void (0);"> last page </a>'
+ '<Input id = "txtGoTo" class = "page-num"/> <a id = "btnGoTo" href = "javascript: void (0 ); "> GO </a>'
+ '</Div> ';
If (currPage> 0 ){
}
If (currPage <numPages ()){
}
Panel. empty ();
Panel. append (html );
$ ('# Page-first', panel)
. Bind ('click', selectPage (1 ));
$ ('# Page-prev', panel)
. Bind ('click', selectPage (currPage-1 ));
$ ('# Page-next', panel)
. Bind ('click', selectPage (currPage + 1 ));
$ ('# Page-last', panel)
. Bind ('click', selectPage (numPages ()));
$ ('. Numpage'). each (function (){
$ (This). bind ('click', selectPage (parseInt ($ (this). text ())));
If (parseInt ($ (this). text () = (currPage )){
$ (This). attr ('class', 'selected ');
}
});
$ ('Input. page-num', panel)
. Val (currPage)
. Change (function (){
SelectPage ($ (this). val ())();
});
$ ('# BtnGoTo', panel)
. Bind ('click ',
Function ()
{
Var goPage = parseInt ($ ('# txtGoTo'). val ());
SelectPage (goPage )();
}
);
If (request ("pageIndex ")! = ""){
$ ('. Selected'). each (function (){
$ (This). attr ('class', 'numpage ');
});
$ ('. Numpage'). each (function (){
If (parseInt ($ (this). text () = parseInt (request ("pageIndex "))){
$ (This). attr ('class', 'selected ');
}
});
}
}
Var currPage = 1;
If (request ("pageIndex ")! = ""){
CurrPage = parseInt (request ("pageIndex "));
}
Var panel = $ (this );
Render ();
Function request (paras ){
Var url = location. href;
Var paraString = url. substring (url. indexOf ("? ") + 1, url. length). split ("&");
Var paraObj = {}
For (I = 0; j = paraString [I]; I ++ ){
ParaObj [j. substring (0, j. indexOf ("= ")). toLowerCase ()] = j. substring (j. indexOf ("=") + 1, j. length );
}
Var returnValue = paraObj [paras. toLowerCase ()];
If (typeof (returnValue) = "undefined "){
Return "";
} Else {
Return returnValue;
}
}
});
}
// Obtain the url parameter request ("ID ")
Function request (paras ){
Var url = location. href;
Var splitChar =/[& #] // you can specify the delimiter.
Var paraString = url. substring (url. indexOf ('? ') + 1, url. length). split (splitChar );
Var paraObj = {}
For (I = 0; j = paraString [I]; I ++ ){
ParaObj [j. substring (0, j. indexOf ("= ")). toLowerCase ()] = j. substring (j. indexOf ("=") + 1, j. length );
}
Var returnValue = paraObj [paras. toLowerCase ()];
If (typeof (returnValue) = "undefined "){
Return "";
} Else {
Return returnValue;
}
}
Function GoToPage (page, anchor ){
Var oUrl = this. location. href. toString ();
If (anchor & oUrl. indexOf ("#" + anchor)> 0 ){
OUrl = oUrl. replace ("#" + anchor ,"");
}
Var re = eval ('/(pageIndex =) ([^ & | #] *)/G ');
Var nUrl = oUrl. replace (re, 'pageindex = '+ page );
If (request ("pageIndex") = ""){
If (oUrl. indexOf ("? ") <= 0 ){
NUrl = nUrl + "? PageIndex = "+ page;
}
Else {
NUrl = nUrl + "& pageIndex =" + page;
}
}
If (anchor & oUrl. indexOf ("#" + anchor) <0) {// link to the anchor
Anchor = anchor. replace ('#','');
NUrl = nUrl + "#" + anchor;
}
This. location = nUrl;
}
Function replaceParamVal (paramName, replaceWith ){
Var oUrl = this. location. href. toString ();
Var re = eval ('/(' + paramName + '=) ([^ & | #] *)/G ');
Var nUrl = oUrl. replace (re, paramName + '=' + replaceWith );
This. location = nUrl;
}
/*** The style used is written here for convenience **/
Document. write ("<style type = \" text/css \ "> ");
Document. write ("/* start by page */");
Document. write (". Page ");
Document. write ("{");
Document. write ("height: 26px ;");
Document. write ("}");
Document. write (". Page div ");
Document. write ("{");
Document. write ("display: inline-block ;");
Document. write ("zoom: 1 ;");
Document. write ("font-size: 14px ;");
Document. write ("}");
Document. write (". Page. Total ");
Document. write ("{");
Document. write ("color: # cc0000 ;");
Document. write ("}");
Document. write (". Page ");
Document. write ("{");
Document. write ("padding: 4px 5px ;");
Document. write ("height: 14px ;");
Document. write ("line-height: 14px ;");
Document. write ("font-size: 14px ;");
Document. write ("border: 1px solid # d5d5d5 ;");
Document. write ("margin: 0px 5px ;");
Document. write ("display: inline-block ;");
Document. write ("}");
Document. write (". Page a: hover ");
Document. write ("{");
Document. write ("text-decoration: underline ;");
Document. write ("border-color: # cc0000 ;");
Document. write ("}");
Document. write (". Page. Selected ");
Document. write ("{");
Document. write ("background: # cc0000 ;");
Document. write ("border-color: # cc0000 ;");
Document. write ("color: # ffffff ;");
Document. write ("display: inline-block ;");
Document. write ("zoom: 1 ;");
Document. write ("}");
Document. write (". Page input ");
Document. write ("{");
Document. write ("width: 40px ;");
Document. write ("overflow-x: visible ;");
Document. write ("padding: 4px 5px ;");
Document. write ("height: 14px ;");
Document. write ("line-height: 14px ;");
Document. write ("font-size: 14px ;");
Document. write ("border: 1px solid # d5d5d5 ;");
Document. write ("margin:-3px 0px 0px 5px ;");
Document. write ("display: inline-block ;");
Document. write ("}");
Document. write ("/* end by page */");
Document. write ("</style> ");
Test.html test file:
<Head>
<Script type = "text/javascript" src = "http://code.jquery.com/jquery-latest.js"> </script>
<Script type = "text/javascript" src = "jquery. mypagination. js"> </script>
</Head>
<Div id = "mypage" class = "Pagination" style = "margin-bottom: 0px;"> </div>
<Script>
$ (Document). ready (function (){
$ ('# Mypage'). scPagination (555 ,{
PageSize: 20,
MyPagerCount: 10,
Callback: function (page ){
Alert (page );
}
});
});
</Script>
Can you introduce a JQuery paging plug-in that is currently well developed?
Jquery. pagination is good. This function is quite complete, and I have modified it myself, because I think it is difficult to see it because he does not have the option on the first or last pages. Supports ajax to read data, framework, json, etc.
Use jquery plug-in to implement Paging
Jquery has a plug-in called dataTables. You can find it.
Jquery. dataTables. min. js
