样式可以自定义,调用简单,直接看实例了,效果图如下: ajax分页 </li> <li> .pagination {font-family: Tahoma;font-size: 12px;height: 22px;margin: 5px 10px;text-align: right;} </li> <li> .pagination a,.page-cur,.page-start,.page-end,.page-disabled,.page-skip { </li> <li> height:22px;line-height:22px;margin:0 3px 0 0;text-align:center;vertical-align:middle;white-space:nowrap;} </li> <li> .pagination input {border-width: 1px;} </li> <li> .page-start, .pagination a, .page-end, .page-disabled {border: 1px solid #CCCCCC;padding: 0 5px;} </li> <li> .pagination a {text-decoration: none;} </li> <li> .page-cur {background-color: #FFEDE1;border: 1px solid #FD6D01;color: #FD6D01;font-weight: 700;padding: 0 5px;} </li> <li> .page-disabled {color: #CCCCCC;} </li> <li> .page-skip {color: #666666;padding: 0 3px;} </li> <li> ボディ> <スクリプト> テストページ(1); 関数 testPage(curPage){ supage('pageNav','testPage','',curPage,100,5); } /** * @param {String} divName ページング ナビゲーションによってレンダリングされる dom オブジェクト ID * @param {String} funName ページ番号をクリックすると、バックグラウンド クエリ データの JS 関数を実行する必要があります * @param {Object} params バックグラウンドクエリデータ関数のパラメータの順序は、現在のページを 内に設定する必要があります。 * @param {String} total バックグラウンドによって返されるレコードの総数 * @param {Boolean} pageSize 各ページに表示されるレコードの数、デフォルトは 10 です */ function supage(divId, funName, params, curPage, total, pageSize){ var output = ''; var pageSize = parseInt(pageSize)>0 ? parseInt(pageSize) : 10; if(parseInt(合計) == 0 parseInt(合計) == 'NaN') return; var totalPage = Math.ceil(total/pageSize); var curPage = parseInt(curPage)>0 ? parseInt(curPage) : 1; //パラメータ数对オブジェクト中解析結果各パラメータ var param_str = ''; if(typeof params == 'オブジェクト'){ for(o in params){ if(typeof params[o] == 'string'){ param_str += ''' + params[o] + '','; } それ以外{ param_str += params[o] + ','; } } //アラート(111); } //設置開始页码 if (totalPage > 10) { if ((curPage - 5) > 0 && curPage < totalPage - 5) { var start = curPage - 5; var end = curPage + 5; } else if (curPage >= (totalPage - 5)) { var start = totalPage - 10; var end = totalPage; } それ以外 { var start = 1; var end = 10; } } 他 { var start = 1; var end = totalPage; } //ホームページコントロール If(curPage>1){ 出力 += '«'; 🎜> } その他 { 出力 += '« '; } //前ページメニューコントロール If(curPage>1){ Output += '‹< } else{ 出力 += '‹'; } //ページ番号表示 for (i = 開始; i If (i == curPage) { 出力 += ''; それ以外 { 出力 += '' + i + ''; } //次のページのメニュー コントロール If(totalPage>1 &&curPage Output += '›< } 他{ 出力 += '›' } //最後のページコントロール If(curPage 出力 += '»'; 🎜> } 他{ 出力 += '»' } 出力 += ''; // dom にレンダリング Document.getElementById(divId).innerHTML = 出力; }; スクリプト>