js 前端分页空间控件
现在web注重用户体验与交互性，ajax 提交数据的方式很早就流行了，它能够在不刷新网页的情况下局部刷新数据。前端分页多是用ajax请求数据（其他方式也有比如手动构造表单模拟提交事件等）。通过js将查询参数构造好发向后台，后台处理后以特定的格式返回，多为json，比较流行处理起来也很方便。当后台数据到达后，浏览器重新渲染界面当然也包括js分页控件，如果觉得每次绘制分页控件对前端性能有影响也可以不绘制，但实现起来相对麻烦。
本人写的分页控件参考了其他网友的代码，链接忘了，控件接受四个参数或一个对象，其实是一样的对于后者只不过将四个参数放在一个对象中。pIndex:每次请求的页码，pSize:每次请求的页容量，container: 放分页控件的容器，fn:如何向服务器请求数据
代码中主要用到了闭包，将上一次的请求信息保存起来，以备下次使用，虽然代码可以直接拿来用但是样式不是通用的，需要每次调样式还好样式比较简单。
1 function pagination(obj){ 2 /*pageIndex: index, 3 pageSize: size, 4 count: count, 5 container: container, 6 fn : fn 7 */ 8 if(!obj||typeof obj!="object"){ 9 return false; 10 } 11 var pageIndex= obj.pageIndex||1, 12 pageSize=obj.pageSize||10, 13 count= obj.count||0, 14 container= obj.container, 15 callback=obj.fn||function(){}; 16 var pageCount =Math.ceil(count/pageSize); 17 if(pageCount==0){ 18 return false ; 19 } 20 if(pageCount<pageIndex){ 21 return false; 22 } 23 /*事件绑定*/ 24 function bindEvent(){ 25 //上一页事件 26 $(container).find(">ul>.pg-prev").unbind("click").bind("click",function(){ 27 if(pageIndex <=1){ 28 return false ; 29 } 30 if(typeof callback=="function"){ 31 pageIndex--; 32 pageIndex = pageIndex<1?1:pageIndex; 33 obj.pageIndex= pageIndex; 34 callback(pageIndex); 35 pagination(obj); 36 } 37 }); 38 //下一页事件 39 $(container).find(">ul>.pg-next").unbind("click").bind("click",function(){ 40 if(pageIndex ==pageCount){ 41 return false ; 42 } 43 if(typeof callback=="function"){ 44 pageIndex++; 45 pageIndex =pageIndex >pageCount?pageCount:pageIndex; 46 obj.pageIndex= pageIndex; 47 callback(pageIndex); 48 pagination(obj); 49 } 50 }); 51 $(container).find(">ul>li:not(.pg-more):not(.pg-prev):not(.pg-next)").unbind("click").bind("click",function(){ 52 pageIndex= +$(this).html(); 53 pageIndex = isNaN(pageIndex)?1:pageIndex; 54 obj.pageIndex= pageIndex; 55 if(typeof callback=="function"){ 56 callback(pageIndex); 57 pagination(obj); 58 } 59 }); 60 }; 61 62 /*画样式*/ 63 function printHead(){ 64 var html=[]; 65 html.push('<li class="pg-prev '+(pageIndex==1?"pg-disabled":"")+'">上一页</li>'); 66 return html.join(""); 67 } 68 function printBody(){ 69 var html=[]; 70 var render=function(num,start){ 71 start=start||1; 72 for(var i=start;i<=num;i++){ 73 html.push('<li class="'+(pageIndex==i?"pg-on":"")+'">'+i+'</li>'); 74 } 75 } 76 if(pageCount<=7){ 77 render(pageCount); 78 }else{ 79 if(pageIndex <4){ 80 render(4); 81 html.push('<li class="pg-more">...</li>'); 82 html.push('<li >'+pageCount+'</li>'); 83 }else{ 84 html.push('<li >1</li>'); 85 html.push('<li class="pg-more">...</li>'); 86 if(pageCount-pageIndex>3){ 87 render(pageIndex+1,pageIndex-1); 88 html.push('<li class="pg-more">...</li>'); 89 html.push('<li >'+pageCount+'</li>'); 90 }else{ 91 render(pageCount,pageCount-3); 92 } 93 } 94 } 95 return html.join(""); 96 } 97 function printTail(){ 98 var html=[]; 99 html.push('<li class="pg-next '+(pageIndex==pageCount?"pg-disabled":"")+'">下一页</li>'); 100 return html.join(""); 101 } 102 function show(){ 103 container.innerHTML= '<ul>'+printHead()+printBody()+printTail()+'</ul>'; 104 } 105 show(); 106 bindEvent(); 107 }
