現在web注重用戶體驗與交互性，ajax 提交數據的方式很早就流行了，它能夠在不刷新網頁的情況下局部刷新數據。前端分頁多是用ajax請求數據（其他方式也有比如手動構造表單模擬提交事件等）。通過js將查詢參數構造好發向后臺，后臺處理后以特定的格式返回，多為json，比較流行處理起來也很方便。當后臺數據到達后，瀏覽器重新渲染界面當然也包括js分頁控件，如果覺得每次繪制分頁控件對前端性能有影響也可以不繪制，但實現起來相對麻煩。
本人寫的分頁控件參考了其他網友的代碼，鏈接忘了，控件接受四個參數或一個對象，其實是一樣的對于后者只不過將四個參數放在一個對象中。pIndex:每次請求的頁碼，pSize:每次請求的頁容量，container: 放分頁控件的容器，fn:如何向服務器請求數據
代碼中主要用到了閉包，將上一次的請求信息保存起來，以備下次使用，雖然代碼可以直接拿來用但是樣式不是通用的，需要每次調樣式還好樣式比較簡單。
function pagination(obj){ /*pageIndex: index,pageSize: size,count: count, container: container,fn : fn */ if(!obj||typeof obj!="object"){ return false; } var pageIndex= obj.pageIndex||1, pageSize=obj.pageSize||10, count= obj.count||0, container= obj.container, callback=obj.fn||function(){}; var pageCount =Math.ceil(count/pageSize); if(pageCount==0){ return false ; } if(pageCount<pageIndex){ return false; } /*事件綁定*/ function bindEvent(){ //上一頁事件 $(container).find(">ul>.pg-prev").unbind("click").bind("click",function(){ if(pageIndex <=1){ return false ; } if(typeof callback=="function"){ pageIndex--; pageIndex = pageIndex<1?1:pageIndex; obj.pageIndex= pageIndex; callback(pageIndex); pagination(obj); } }); //下一頁事件 $(container).find(">ul>.pg-next").unbind("click").bind("click",function(){ if(pageIndex ==pageCount){ return false ; } if(typeof callback=="function"){ pageIndex++; pageIndex =pageIndex >pageCount?pageCount:pageIndex; obj.pageIndex= pageIndex; callback(pageIndex); pagination(obj); } }); $(container).find(">ul>li:not(.pg-more):not(.pg-prev):not(.pg-next)").unbind("click").bind("click",function(){ pageIndex= +$(this).html(); pageIndex = isNaN(pageIndex)?1:pageIndex; obj.pageIndex= pageIndex; if(typeof callback=="function"){ callback(pageIndex); pagination(obj); } }); }; /*畫樣式*/ function printHead(){ var html=[]; html.push('<li class="pg-prev '+(pageIndex==1?"pg-disabled":"")+'">上一頁</li>'); return html.join(""); } function printBody(){ var html=[]; var render=function(num,start){ start=start||1; for(var i=start;i<=num;i++){ html.push('<li class="'+(pageIndex==i?"pg-on":"")+'">'+i+'</li>'); } } if(pageCount<=7){ render(pageCount); }else{ if(pageIndex <4){ render(4); html.push('<li class="pg-more">...</li>'); html.push('<li >'+pageCount+'</li>'); }else{ html.push('<li >1</li>'); html.push('<li class="pg-more">...</li>'); if(pageCount-pageIndex>3){ render(pageIndex+1,pageIndex-1); html.push('<li class="pg-more">...</li>'); html.push('<li >'+pageCount+'</li>'); }else{ render(pageCount,pageCount-3); } } } return html.join(""); } function printTail(){ var html=[]; html.push('<li class="pg-next '+(pageIndex==pageCount?"pg-disabled":"")+'">下一頁</li>'); return html.join(""); } function show(){ container.innerHTML= '<ul>'+printHead()+printBody()+printTail()+'</ul>'; } show(); bindEvent();}以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
