這篇文章主要介紹了純JavaScript實現的分頁插件,涉及javascript結合php動態實現分頁效果的技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了純JavaScript實現的分頁插件。分享給大家供大家參考。具體如下：

1. //總條數(必填) 
2. var Num=Number(<?php echo $count;?>) 
3. //當前頁(必填) 
4. var index = Number(<?php echo $page;?>); 
5. /* //每頁的條數(可選,默認每頁10條) */ 
6. var pageNum=Number(10);  
7. /* //最大顯示的頁碼的數目(可選，默認顯示5個頁碼,頁碼數目必須大于等于1) */ 
8. var maxPageNum=Number(5); 
9. //以下可忽略 
10. //計算得出總頁數 
11. var count = (Num%pageNum)>0?(Num/pageNum+1):(Num/pageNum); 
12. count=Math.floor(count);//取整轉化為數據類型 
13. //顯示的最小頁碼, 
14. var first=1; 
15. //顯示的最大頁碼，首先last<=count;其次last是小于等于count的最大數//last=index+maxPageNum/2; 
16. var last =1; 
17. var decrease=Math.floor(maxPageNum/2);//當前頁向上增加值 
18. var increase=Math.floor(maxPageNum/2);//當前頁向下減少值 
19. if(maxPageNum>=1){ 
20. if(maxPageNum==1){//最多顯示一頁時 
21. first=index<=count?index:count;  
22. last=index<=count?index:count;  
23. }else{ 
24. //first要大于零 
25. first=(index-decrease); 
26. while(first<=0){ 
27. first++; 
28. }  
29. //first判斷顯示的最后一頁 
30. if((count-index)<=decrease){ 
31. var diff=count-first; 
32. while(diff<maxPageNum-1){ 
33. if(first==1){ 
34. break; 
35. }else{ 
36. --first; 
37. diff=count-first; 
38. } 
39. } 
40. } 
41. //last要小于count 
42. last=(index+increase); 
43. while(last>=1){ 
44. if(last<=count){ 
45. break; 
46. } 
47. last--; 
48. }  
49. //last//判斷顯示的最后一頁與maxPageNum的關系 
50. last=last>=maxPageNum?last:(maxPageNum>count?count:maxPageNum); 
51. } 
52. }else{ 
53. alert("至少需要顯示一個頁碼!"); 
54. } 
55. var prev = index - 1;//上一頁 
56. var next = index+ 1;//下一頁  
57. var str = "<tr>"; 
58. if(count==0){ 
59. str += "<td>共<a href='#'>0</a>頁</td><td>"; 
60. }else if(index>count||index<=0){ 
61. str="<td style='color:blue;' >頁碼超出范圍</td>"; 
62. }else if (count > 0) { 
63. str += "<td>"; 
64. if(first>1){ 
65. str += "<span style='color:#4169E1;' >...</span>"; 
66. } 
67. var i=1; 
68. for(i=first;i<=last; i++){ 
69. if(i==index){ 
70. str += "<a href='#' style='color:#4169E1;' onclick='submit(" + i + ");'>[" + i+ "]</a>"; 
71. }else{ 
72. str += "<a href='#' onclick='submit(" + i + ");'>" + i+ "</a>"; 
73. } 
74. }  
75. if(last<count){ 
76. str += "<span style='font-size:16px;color:#4169E1;' >...</span>";  
77. } 
78. str+="</td><td style='font-size: 14px;'>共<a href='#first' style='color:#4169E1;font-size: 16px;' >"+ Num +"</a>條</td>"; 
79. /* if(index!=1){ 
80. str +="<td style='width:60px;font-family: 微軟雅黑;font-size: 14px;' ><a href='#' id='prev' onclick='submit(" + prev+ ");'>上一頁</a></td>";  
81. } 
82. if(index<count){ 
83. str +="<td style='width:60px;font-family: 微軟雅黑;font-size: 14px;'><a href='#' id='next' onclick='submit("+ next + ");'>下一頁</a></td>"; 
84. }*/ 
85. if(index!=1&&count>1){ 
86. str += "<td style='width:40px;font-family: 微軟雅黑;font-size: 14px;white-space: nowrap;'><a href='#' id='first' name='first' onclick='submit(1);'>首頁</a></td>"; 
87. } 
88. if(index!=count&&count>1&&index<count){ 
89. str += "<td style='width:40px;font-family: 微軟雅黑;font-size: 14px;white-space: nowrap;'><a href='#' onclick='submit(" + count+ ");'>尾頁</a></td>" ; 
90. }  
91. str+="</tr>"; 
92. } 
93. //分頁區域填寫 
94. $('.page').html(str); 
95. <table class="page"> 
96. <tr><td>此處分頁只需要傳遞給我當前頁碼和總頁數即可</td></tr> 
97. </table> 
98. //根據頁碼查詢, 
99. function submit(pageIndex) { 
100. //var sortInfo = $.getUrlParam('sortInfo');//判斷是哪一個頁面的查詢 
101. var url = "<?php echo current_url();?>?page="+pageIndex+"&field=<?php echo$field;?>&value=<?php echo $field_value;?>"; 
102. window.location.href=url; 
103. } 

希望本文所述對大家的javascript程序設計有所幫助。