Jquery.mypagination.js file:
/* *
*
* JQuery Paging Plugin
* 1.0 Zheng 2014-03-18
* 1.1 compatible URL contains # address, GoToPage can specify anchor point (special requirement) 2014-04-10 09:00:34
* 1.2 The number of pages can be configured in the page bar list
* 1.3 added page code jump function
* $ (' #mypage '). Scpagination (555, {
* pagesize:10,//the number of records displayed per page
* mypagercount:10,//the number of pages displayed in the page bar
* Callback:function (page) {
* Alert ("page number selected" +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>[<span class= ' total ' > ' + totalproperty + ' </span>]</div> '
+ ' <a id= "Page-first" href= "javascript:void (0);" > Home </a> '
+ ' <a id= "Page-prev" href= "javascript:void (0);" > on 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 </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 (the 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;
}
}
});
}
Get URL parameter request ("ID")
function request (paras) {
var url = location.href;
var Splitchar =/[&#]/;//Set separator character
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=) ([^&|#]*)/gi ');
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 Anchor Point
Anchor = Anchor.replace (' # ', ');
Nurl = Nurl + "#" + anchor;
}
This.location = Nurl;
}
function Replaceparamval (paramname, replacewith) {
var ourl = this.location.href.toString ();
var re = eval ('/(' + paramname + ' =) ([^&|#]*)/gi ');
var nurl = Ourl.replace (Re, paramname + ' = ' + replacewith);
This.location = Nurl;
}
/*** used in the style for the convenience of directly written in here **/
document.write ("<style type=\" text/css\ ">");
document.write ("/* pagination start */");
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 a ");
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 ("/* pagination End */");
document.write ("</style>");
test.html test File:
<script type= "Text/javascript" src= "Http://code.jquery.com/jquery-latest.js" ></script>
<script type= "Text/javascript" src= "Jquery.mypagination.js" ></script>
<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>
jquery Paging Plugin
