點擊這里查看效果
這個分頁插件使用方便,引用keleyidivpager.js和keleyidivpager.css文件,然后在htm(或者php,aspx,jsp等)頁面中對分頁總數,參數名,前綴后綴等進行設置就可以了
以下是源代碼:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>一個強大的jquery分頁插件-柯樂義</title> 5 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script> 6 <link href="http://keleyi.com/keleyi/phtml/jqtexiao/14/keleyidivpager.css" type="text/css" rel="Stylesheet" /> 7 </head> 8 <body> 9 <div><h2>分頁插件·柯樂義</h2><a href="http://keleyi.com/a/bjac/0xusjq8m.htm" target="_blank">原文</a></div> 10 <script type="text/javascript" src="http://keleyi.com/keleyi/phtml/jqtexiao/14/keleyidivpager.js"></script> 11 <div id="div_pager"> 12 </div> 13 <script type="text/javascript"> 14 var totalPage = 20; 15 var totalRecords = 390; 16 var pageNo = getParameter('p'); //這里設置參數名(柯 樂 義 注 釋) 17 if (!pageNo) { 18 pageNo = 1; 19 } 20 //生成分頁控件 根據分頁的形式在這里設置 21 kkpager.init({ 22 pno: pageNo, 23 //總頁碼 24 total: totalPage, 25 //總數據條數 26 totalRecords: totalRecords, 27 //鏈接前部 28 hrefFormer: 'keleyidivpager', 29 //鏈接尾部 30 hrefLatter: '.htm', 31 getLink: function (n) { 32 return this.hrefFormer + this.hrefLatter + "?p=" + n; //參數名跟上面相同 33 } 34 }); 35 kkpager.generPageHtml(); 36 </script> 37 </body> 38 </html>