一组挺好用的分页代码(前端)
本文共 6402 字，大约阅读时间需要 21 分钟。
一个js文件(jquery.page.js):
(function($){ alert("我运行了!"); var ms = { init:function(obj,args){ return (function(){ ms.fillHtml(obj,args); ms.bindEvent(obj,args); })(); }, //填充html fillHtml:function(obj,args){ return (function(){ obj.empty(); //上一页 if(args.current > 1){ obj.append('上一页'); }else{ obj.remove('.prevPage'); obj.append('上一页'); } //中间页码 if(args.current != 1 && args.current >= 4 && args.pageCount != 4){ obj.append(''+1+''); } if(args.current-2 > 2 && args.current <= args.pageCount && args.pageCount > 5){ obj.append('...'); } var start = args.current -2,end = args.current+2; if((start > 1 && args.current < 4)||args.current == 1){ end++; } if(args.current > args.pageCount-4 && args.current >= args.pageCount){ start--; } for (;start <= end; start++) { if(start <= args.pageCount && start >= 1){ if(start != args.current){ obj.append(''+ start +''); }else{ obj.append(''+ start +''); } } } if(args.current + 2 < args.pageCount - 1 && args.current >= 1 && args.pageCount > 5){ obj.append('...'); } if(args.current != args.pageCount && args.current < args.pageCount -2 && args.pageCount != 4){ obj.append(''+args.pageCount+''); } //下一页 if(args.current < args.pageCount){ obj.append('下一页'); }else{ obj.remove('.nextPage'); obj.append('下一页'); } })(); }, //绑定事件 bindEvent:function(obj,args){ return (function(){ obj.on("click","a.tcdNumber",function(){ var current = parseInt($(this).text()); ms.fillHtml(obj,{"current":current,"pageCount":args.pageCount}); if(typeof(args.backFn)=="function"){ args.backFn(current); }; $.ajax({ type : "get", url : "/SupplyOfCarsPage", data : {current:current}, dataType : "json", success : function(pagelist){ $("#pageNum").text(pagelist.pageNum); $("#pagelisttable").empty(); $.each(pagelist.page, function(){ $("#pagelisttable").append( "" + ""+ " "+ " "+this.start_station+" → "+this.destination_station+""+ " "+ " "+ ""+ ""+ " "+ " 订单数: "+this.using_account+" "+ " "+ " "+ " 注册时间: "+this.register_time+""+ " "+ " "+ ""+ "" ); }); } }); }); //上一页 obj.on("click","a.prevPage",function(){ var current = parseInt(obj.children("span.current").text()); ms.fillHtml(obj,{"current":current-1,"pageCount":args.pageCount}); $.ajax({ type : "get", url : "/SupplyOfCarsPage", data : {current:current-1}, dataType : "json", success : function(pagelist){ $("#pageNum").text(pagelist.pageNum); $("#pagelisttable").empty(); $.each(pagelist.page, function(){ $("#pagelisttable").append( "" + ""+ " "+ " "+this.start_station+" → "+this.destination_station+""+ " "+ " "+ ""+ ""+ " "+ " 订单数: "+this.using_account+" "+ " "+ " "+ " 注册时间: "+this.register_time+""+ " "+ " "+ ""+ "" ); }); } }); if(typeof(args.backFn)=="function"){ args.backFn(current-1); }; }); //下一页 obj.on("click","a.nextPage",function(){ var current = parseInt(obj.children("span.current").text()); ms.fillHtml(obj,{"current":current+1,"pageCount":args.pageCount}); $.ajax({ type : "get", url : "/SupplyOfCarsPage", data : {current:current+1}, dataType : "json", success : function(pagelist){ $("#pageNum").text(pagelist.pageNum); $("#pagelisttable").empty(); $.each(pagelist.page, function(){ $("#pagelisttable").append( "" + ""+ " "+ " "+this.start_station+" → "+this.destination_station+""+ " "+ " "+ ""+ ""+ " "+ " 订单数: "+this.using_account+" "+ " "+ " "+ " 注册时间: "+this.register_time+""+ " "+ " "+ ""+ "" ); }); } }); if(typeof(args.backFn)=="function"){ args.backFn(current+1); } }); })(); } } $.fn.createPage = function(options){ var args = $.extend({ pageCount : 10, current : 1, backFn : function(){} },options); ms.init(this,args); }})(jQuery); html中的代码:
样式:
js样式:
html:
效果图:
总结:该分页代码和pagehelp jar包配合使用很舒服!
转载地址：http://lubhz.baihongyu.com/
你可能感兴趣的文章