樣式可以自訂，調用簡單，直接看執行個體了，效果圖如下：
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>ajax分頁</title>
- </head>
-
- <body>
- <style>
- .pagination {font-family: Tahoma;font-size: 12px;height: 22px;margin: 5px 10px;text-align: right;}
- .pagination a,.page-cur,.page-start,.page-end,.page-disabled,.page-skip {
- height:22px;line-height:22px;margin:0 3px 0 0;text-align:center;vertical-align:middle;white-space:nowrap;}
- .pagination input {border-width: 1px;}
- .page-start, .pagination a, .page-end, .page-disabled {border: 1px solid #CCCCCC;padding: 0 5px;}
- .pagination a {text-decoration: none;}
- .page-cur {background-color: #FFEDE1;border: 1px solid #FD6D01;color: #FD6D01;font-weight: 700;padding: 0 5px;}
- .page-disabled {color: #CCCCCC;}
- .page-skip {color: #666666;padding: 0 3px;}
- </style>
- <div id="pageNav"></div>
- </body>
-
- </html>
- <script>
- testPage(1);
- function 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 = '<div class="pagination">';
- var pageSize = parseInt(pageSize)>0 ? parseInt(pageSize) : 10;
- if(parseInt(total) == 0 parseInt(total) == 'NaN') return;
- var totalPage = Math.ceil(total/pageSize);
- var curPage = parseInt(curPage)>0 ? parseInt(curPage) : 1;
-
- //從參數對象中解析出來各個參數
- var param_str = '';
- if(typeof params == 'object'){
- for(o in params){
- if(typeof params[o] == 'string'){
- param_str += '\'' + params[o] + '\',';
- }
- else{
- param_str += params[o] + ',';
- }
- }
- //alert(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;
- }
- else {
- var start = 1;
- var end = 10;
- }
- }
- else {
- var start = 1;
- var end = totalPage;
- }
-
- //首頁控制
- if(curPage>1){
- output += '<a href="javascript:'+funName+'(' + param_str + '1);" title="第一頁" class="page-first">«</a>';
- }
- else
- {
- output += '<span class="page-disabled">«</span> ';
- }
- //上一頁菜單控制
- if(curPage>1){
- output += '<a href="javascript:'+funName+'(' + param_str + (curPage-1)+');" title="上一頁" class="page-previous">‹</a>';
- }
- else{
- output += '<span class="page-disabled">‹</span>';
- }
-
- //頁碼展示
- for (i = start; i <= end; i++) {
- if (i == curPage) {
- output += '<a href="javascript:;" class="page-cur">' + curPage + '</a>';
- }
- else {
- output += '<a href="javascript:'+funName+'(' + param_str + i + ');">' + i + '</a>';
- }
- }
- //下一頁菜單控制
- if(totalPage>1 && curPage<totalPage){
- output += '<a title="下一頁" href="javascript:'+funName+'('+param_str + (curPage+1)+');" class="page-next">›</a>';
- }
- else{
- output += '<span class="page-disabled">›</span>';
- }
- //最後頁控制
- if(curPage<totalPage){
- output += '<a title="最後頁" href="javascript:'+funName+'('+param_str + totalPage+');" class="page-end">»</a>';
- }
- else{
- output += '<span class="page-disabled">»</span>';
- }
-
- output += '</div>';
- //渲染到dom中
- document.getElementById(divId).innerHTML = output;
- };
- </script>
