很好的一个ajax分页实例

 

样式可以自定义，调用简单，直接看实例了，效果图如下：

 

1. nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
2.   
3.   
4.   
5.   
6.   
7.   
8.   
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.   
20.   
21.   
22.   
23.   
24. <script> </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 = '
    ';  
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 
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 += '«';  
84.     }  
85.     else  
86.     {  
87.         output += '« ';  
88.     }  
89.     //上一页菜单控制  
90.     if(curPage>1){  
91.         output += '‹';  
92.     }  
93.     else{  
94.         output += '‹';  
95.     }  
96.       
97.     //页码展示  
98.     for (i = start; i 
99.         if (i == curPage) {  
100.             output += '' + curPage + '';  
101.         }  
102.         else {  
103.             output += '' + i + '';  
104.         }  
105.     }  
106.     //下一页菜单控制  
107.     if(totalPage>1 && curPage
108.         output += '›';  
109.     }  
110.     else{  
111.         output += '›';  
112.     }  
113.     //最后页控制  
114.     if(curPage
115.         output += '»';  
116.     }  
117.     else{  
118.         output += '»';  
119.     }  
120.       
121.     output += '

';  

    //渲染到dom中  

    document.getElementById(divId).innerHTML = output;  

};