你的位置:首页 > 软件开发 > Java > js 前端分页空间控件

js 前端分页空间控件

发布时间:2017-04-19 12:00:18
现在web注重用户体验与交互性,ajax 提交数据的方式很早就流行了,它能够在不刷新网页的情况下局部刷新数据。前端分页多是用ajax请求数据(其他方式也有比如手动构造表单模拟提交事件等)。通过js将查询参数构造好发向后台,后台处理后以特定的格式返回,多为json,比较流行处理起来 ...

      现在web注重用户体验与交互性,ajax 提交数据的方式很早就流行了,它能够在不刷新网页的情况下局部刷新数据。前端分页多是用ajax请求数据(其他方式也有比如手动构造表单模拟提交事件等)。通过js将查询参数构造好发向后台,后台处理后以特定的格式返回,多为json,比较流行处理起来也很方便。当后台数据到达后,浏览器重新渲染界面当然也包括js分页控件,如果觉得每次绘制分页控件对前端性能有影响也可以不绘制,但实现起来相对麻烦。

     本人写的分页控件参考了其他网友的代码,链接忘了,控件接受四个参数或一个对象,其实是一样的对于后者只不过将四个参数放在一个对象中。pIndex:每次请求的页码,pSize:每次请求的页容量,container: 放分页控件的容器,fn:如何向服务器请求数据

    代码中主要用到了闭包,将上一次的请求信息保存起来,以备下次使用,虽然代码可以直接拿来用但是样式不是通用的,需要每次调样式还好样式比较简单。

js 前端分页空间控件js 前端分页空间控件
 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 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 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 >...</li>'); 82                 html.push('<li >'+pageCount+'</li>');     83             }else{ 84                 html.push('<li >1</li>');   85                 html.push('<li >...</li>'); 86                 if(pageCount-pageIndex>3){ 87                     render(pageIndex+1,pageIndex-1); 88                     html.push('<li >...</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 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 }

原标题:js 前端分页空间控件

关键词:JS

JS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。