Ajax ページングの良い例

 

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

 

1.   
2.   
3.   
4.   
5.   
6.   
7.   
8.   
9.   
10.   
11.   
12.   
13.   
14. <スクリプト>  
15. テストページ(1);  
16. 関数 testPage(curPage){
17.   
18.         supage('pageNav','testPage','',curPage,100,5);  
19.   
20. }
21.   
22.   
23. /**
25. * @param {String} divName ページング ナビゲーションによってレンダリングされる dom オブジェクト ID
26. * @param {String} funName ページ番号をクリックすると、バックグラウンド クエリ データの JS 関数を実行する必要があります
27. * @param {Object} params バックグラウンドクエリデータ関数のパラメータの順序は、現在のページを
内に設定する必要があります。
28. * @param {String} total バックグラウンドによって返されるレコードの総数
29. * @param {Boolean} pageSize 各ページに表示されるレコードの数、デフォルトは 10 です
30. ​*/
31. function supage(divId, funName, params, curPage, total, pageSize){
32.     var output = '
    ';  
33.     var pageSize = parseInt(pageSize)>0 ? parseInt(pageSize) : 10;  
34.     if(parseInt(合計) == 0 parseInt(合計) == 'NaN') return;  
35.     var totalPage = Math.ceil(total/pageSize);  
36.     var curPage = parseInt(curPage)>0 ? parseInt(curPage) : 1;  
37.       
38.     //パラメータ数对オブジェクト中解析結果各パラメータ
39.     var param_str = '';  
40.     if(typeof params == 'オブジェクト'){
41.         for(o in params){
42.             if(typeof params[o] == 'string'){
43.                param_str += ''' + params[o] + '',';  
44.             }
45.             それ以外{
46.                param_str += params[o] + ',';  
47.             }
48.         }
49.         //アラート(111);  
50.     }
51.     //設置開始页码
52.     if (totalPage > 10) {
53.         if ((curPage - 5) > 0 && curPage < totalPage - 5) {
54.             var start = curPage - 5;  
55.             var end = curPage + 5;  
56.         }
57.         else if (curPage >= (totalPage - 5)) {
58.             var start = totalPage - 10;  
59.             var end = totalPage;  
60.         }
61. それ以外 {
var start = 1;
var end = 10;
63. }
64. }
65. 他 {
66. var start = 1;
67. var end = totalPage;
68. }
70. //ホームページコントロール
71. If(curPage>1){
72. 出力 += '«'; 🎜>
}
その他
{
出力 += '« ';
76. }
77. //前ページメニューコントロール
78. If(curPage>1){
79. Output += '‹<
80. }
81. else{
82. 出力 += '‹';
}
//ページ番号表示
for (i = 開始; i If (i == curPage) {
出力 += '';
87.                                                                                                
それ以外 {
88. 出力 += '' + i + '';
                                                                                               
89. }
90. //次のページのメニュー コントロール
91. If(totalPage>1 &&curPage
92. Output += '›<
93. }
94. 他{
95. 出力 += '›'
96. }
97. //最後のページコントロール
98. If(curPage
99. 出力 += '»'; 🎜>
}
他{
出力 += '»'
}
出力 += '

';

// dom にレンダリング

Document.getElementById(divId).innerHTML = 出力;

};