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.   
25. テストページ(1);  
26. 関数 testPage(curPage){
27.   
28.         supage('pageNav','testPage','',curPage,100,5);  
29.   
30. }
31.   
32.   
33. /**
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(合計) == 0 parseInt(合計) == '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 == 'オブジェクト'){
51.         for(o in params){
52.             if(typeof params[o] == 'string'){
53.                param_str += ''' + params[o] + '',';  
54.             }
55.             それ以外{
56.                param_str += params[o] + ',';  
57.             }
58.         }
59.         //アラート(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. それ以外 {
var start = 1;
var end = 10;
73. }
74. }
75. 他 {
76. var start = 1;
77. var end = totalPage;
78. }
80. //ホームページコントロール
81. If(curPage>1){
82. 出力 += '«'; 🎜>
}
その他
{
出力 += '« ';
86. }
87. //前ページメニューコントロール
88. If(curPage>1){
89. Output += '‹
90. }
91. else{
92. 出力 += '‹';
}
//ページ番号表示
for (i = 開始; i If (i == curPage) {
出力 += '';
97.                                                                                                
それ以外 {
98. 出力 += '' + i + '';
                                                                                               
99. }
100. //次のページのメニュー コントロール
101. If(totalPage>1 &&curPage
102. Output += '›
103. }
104. 他{
105. 出力 += '›'
106. }
107. //最後のページコントロール
108. If(curPage
109. 出力 += '»'; 🎜>
}
他{
出力 += '»'
}
出力 += '