纯JavaScript实现的分页插件实例

这篇文章主要介绍了纯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程序设计有所帮助。