很好的一個ajax分頁執行個體

來源:互聯網
上載者:User

 

樣式可以自訂,調用簡單,直接看執行個體了,效果圖如下:

 

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>ajax分頁</title>  
  6. </head>  
  7.   
  8. <body>  
  9. <style>  
  10. .pagination {font-family: Tahoma;font-size: 12px;height: 22px;margin: 5px 10px;text-align: right;}  
  11. .pagination a,.page-cur,.page-start,.page-end,.page-disabled,.page-skip {  
  12. height:22px;line-height:22px;margin:0 3px 0 0;text-align:center;vertical-align:middle;white-space:nowrap;}  
  13. .pagination input {border-width: 1px;}  
  14. .page-start, .pagination a, .page-end, .page-disabled {border: 1px solid #CCCCCC;padding: 0 5px;}  
  15. .pagination a {text-decoration: none;}  
  16. .page-cur {background-color: #FFEDE1;border: 1px solid #FD6D01;color: #FD6D01;font-weight: 700;padding: 0 5px;}  
  17. .page-disabled {color: #CCCCCC;}  
  18. .page-skip {color: #666666;padding: 0 3px;}  
  19. </style>  
  20. <div id="pageNav"></div>  
  21. </body>  
  22.   
  23. </html>  
  24. <script>  
  25. testPage(1);  
  26. function testPage(curPage){  
  27.   
  28.         supage('pageNav','testPage','',curPage,100,5);  
  29.   
  30. }  
  31.   
  32.   
  33. /** 
  34.  
  35.  * @param {String} divName 分頁導航渲染到的dom對象ID 
  36.  * @param {String} funName 點擊頁碼需要執行後台查詢資料的JS函數 
  37.  * @param {Object} params 後台查詢資料函數的參數,參數順序就是該對象的順序,當前頁面一定要設定在裡面的 
  38.  * @param {String} total 後台返回的總記錄數 
  39.  * @param {Boolean} pageSize 每頁顯示的記錄數,預設是10 
  40.  */  
  41. function supage(divId, funName, params, curPage, total, pageSize){  
  42.     var output = '<div class="pagination">';  
  43.     var pageSize = parseInt(pageSize)>0 ? parseInt(pageSize) : 10;  
  44.     if(parseInt(total) == 0  parseInt(total) == 'NaN') return;  
  45.     var totalPage = Math.ceil(total/pageSize);  
  46.     var curPage = parseInt(curPage)>0 ? parseInt(curPage) : 1;  
  47.       
  48.     //從參數對象中解析出來各個參數  
  49.     var param_str = '';  
  50.     if(typeof params == 'object'){  
  51.         for(o in params){  
  52.             if(typeof params[o] == 'string'){  
  53.                param_str += '\'' + params[o] + '\',';  
  54.             }  
  55.             else{  
  56.                param_str += params[o] + ',';  
  57.             }  
  58.         }  
  59.         //alert(111);  
  60.     }  
  61.     //設定起始頁碼  
  62.     if (totalPage > 10) {  
  63.         if ((curPage - 5) > 0 && curPage < totalPage - 5) {  
  64.             var start = curPage - 5;  
  65.             var end = curPage + 5;  
  66.         }  
  67.         else if (curPage >= (totalPage - 5)) {  
  68.             var start = totalPage - 10;  
  69.             var end = totalPage;  
  70.         }  
  71.         else {  
  72.             var start = 1;  
  73.             var end = 10;  
  74.         }  
  75.     }  
  76.     else {  
  77.         var start = 1;  
  78.         var end = totalPage;  
  79.     }  
  80.       
  81.     //首頁控制  
  82.     if(curPage>1){  
  83.         output += '<a href="javascript:'+funName+'(' + param_str + '1);" title="第一頁" class="page-first">«</a>';  
  84.     }  
  85.     else  
  86.     {  
  87.         output += '<span class="page-disabled">«</span> ';  
  88.     }  
  89.     //上一頁菜單控制  
  90.     if(curPage>1){  
  91.         output += '<a href="javascript:'+funName+'(' + param_str + (curPage-1)+');" title="上一頁" class="page-previous">‹</a>';  
  92.     }  
  93.     else{  
  94.         output += '<span class="page-disabled">‹</span>';  
  95.     }  
  96.       
  97.     //頁碼展示  
  98.     for (i = start; i <= end; i++) {  
  99.         if (i == curPage) {  
  100.             output += '<a href="javascript:;" class="page-cur">' + curPage + '</a>';  
  101.         }  
  102.         else {  
  103.             output += '<a href="javascript:'+funName+'(' + param_str + i + ');">' + i + '</a>';  
  104.         }  
  105.     }  
  106.     //下一頁菜單控制  
  107.     if(totalPage>1 && curPage<totalPage){  
  108.         output += '<a title="下一頁" href="javascript:'+funName+'('+param_str + (curPage+1)+');" class="page-next">›</a>';  
  109.     }  
  110.     else{  
  111.         output += '<span class="page-disabled">›</span>';  
  112.     }  
  113.     //最後頁控制  
  114.     if(curPage<totalPage){  
  115.         output += '<a title="最後頁" href="javascript:'+funName+'('+param_str + totalPage+');" class="page-end">»</a>';  
  116.     }  
  117.     else{  
  118.         output += '<span class="page-disabled">»</span>';  
  119.     }  
  120.       
  121.     output += '</div>';  
  122.     //渲染到dom中  
  123.     document.getElementById(divId).innerHTML = output;  
  124. };  
  125. </script>  


相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。