很好的一个ajax分页实例代码_H5之家 - 中国HTML5教程资源分享第一站

很好的一个ajax分页实例代码

01.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
02.<html xmlns="">
03.<head>
04.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05.<title>ajax分页</title>
06.</head>
07.
08.<body>
09.<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>
样式可以自定义，调用简单，直接看实例了，效果图如下：