Universal Paging (jquery edition)

1. Simple definition of Style

<styletype= "Text/css">. Fanye{Color:Blue;Margin-right:15px;text-decoration:None;        }. Unuse{Color:Gray;        }    </style>

2. Prepare a div for rendering paging buttons

 <  body     >  <  h1  id  = "Result"  >   current page: [1]  </ h1     >  <  div  id  = "Pager"     >  </ div  >  </ body  >  

3. Write Paging function

(function($) {$.fn.pager=function(options) {varDefaults ={pagenum:1, PageCount:1        }; varopts = $.extend (true, defaults, options); //return This.each (function () {        return$( This). Empty (). Append (Renderpager (parseint (Opts.pagenum), parseint (Opts.pagecount), opts.btncallback)); //});    }; functionRenderpager (Pagenum, PageCount, btncallback) {var$pager = $ (' <div id= "PageA" ></div> "); $pager. Append (Renderbtn (' Home ', Pagenum, PageCount, Btncallback). Append (renderbtn (' previous page '), Pagenum, PageCount, Btncallback)); $pager. Append (Renderbtn (' Next page ', Pagenum, PageCount, Btncallback). Append (Renderbtn (' last '), Pagenum, PageCount, Btncallback)); //$pager. Append (' <span></span> ');        return$pager; }    functionrenderbtn (btn, Pagenum, PageCount, btncallback) {var$Button = $ (' <a href= "javascript:;" class= "fanye" > ' + btn + ' </a> '); varCurrentPage = 1; Switch(BTN) { CaseHome: CurrentPage= 1;  Break;  Case"Prev": CurrentPage= PageNum-1;  Break;  Case"Next Page": CurrentPage= Pagenum + 1;  Break;  CaseLast: CurrentPage=PageCount;  Break; }        if(btn = = "Home" | | btn = = "Previous Page") {Pagenum<= 1? $Button. addclass ("Unuse"): $Button. Click (function() {btncallback (currentpage,pagecount);}); }        Else{pagenum>= PageCount? $Button. addclass ("Unuse"): $Button. Click (function() {btncallback (currentpage, PageCount);}); }        return$Button; }}) (JQuery);

4. Call

<script type= "Text/javascript" language= "JavaScript" >$ (document). Ready (function () {            varCurrentPage = 1; varPageCount = 10;        Pagebtncallback (CurrentPage, PageCount);        }); varPagebtncallback =function(CurrentPage, PageCount) {$ ("#pager"). Pager ({pagenum:currentpage, Pagecount:pagecount, BTNCALLBACK:PAGEBT            Ncallback}); $("#result"). HTML ("current page: [" + CurrentPage + "]");           }; </script>

Universal Paging (jquery edition)