jQuery实现页码跳转式动态数据分页
程序员文章站
2022-04-20 17:46:15
我们这次给大家带来的是用jquery实现页码跳转式动态数据分页这个效果,这个效果最明显的就是没有数据加载和刷新页面这个过程,再做小型数据的加载也多级网页加载的时候很有效。我...
我们这次给大家带来的是用jquery实现页码跳转式动态数据分页这个效果,这个效果最明显的就是没有数据加载和刷新页面这个过程,再做小型数据的加载也多级网页加载的时候很有效。我们先来看下实际效果:
下面我们给出全部效果代码:
html全部代码:
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>jquery实现页码跳转式动态数据分页-</title> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <!-- <script type="text/javascript" src="back-endpage.js"></script> --> <!-- 后台分页 --> <script type="text/javascript" src="js/front-endpage.js"></script><!-- 前台分页 --> <script type="text/javascript" src="js/shujv2.js"></script> <link rel="stylesheet" type="text/css" href="css/table.css" rel="external nofollow" > </head> <body> <div id="histroybox"></div> <script type="text/javascript"> //前台分页的样子 $('#histroybox').cjjtable({ 'title':["装点","卸点","运输货物","下单日期","作者"],//thead中的标题 必填 'body':["taskcode","startaddr","endaddr","varietiestypename","createdate","customername"],//tbody td 取值的字段 必填 'display':[1,1,1,1,1,2],//隐藏域,1显示,2隐藏 必填 'pagenumber':10,//每页显示的条数 选填 'pagelength':data.length,//选填 'url':data,//数据源 必填 dbtrclick:function(e){//双击tr事件 alert(e.find('.taskcode').html()) } }); //后台分页的样子 /*$('#histroybox').cjjtable({ 'title':["装点","卸点","运输货物","下单日期"],//thead中的标题 必填 'body':["contactname","contactmobliephone","carriername","tasknum","taskcustomerexpectprice","taskcustomerbudgetfreight"],//tbody td 取值的字段 必填 'display':[1,1,1,1,2,2],//隐藏域,1显示,2隐藏 必填 'pagejson':{ "taskid":528710, "pagesize":100,//ajax请求参数中的每页展示数量 选填 "token":"yjumunfeg3reqisyamcfea" }, 'url':'api/quoted/quotedlist',//数据源 必填 dbtrclick:function(that){ //双击tr事件 alert(that.find('.contactname').html()) } });*/ </script> </body> </html>
其中<script type="text/javascript" src="js/shujv2.js"></script>是数据js内容,大家在实际操作的时候可以用js获取json达到要的数据格式:
shujv2.js代码:
var data = [ { "warehouseid" : "3750", "warehousecode" : "ck20140825061813777127447", "province" : "上海", "endprovince" : "江苏省", "provinceid" : "310000", "cityid" : "310100", "areaid" : "310109", "endprovinceid" : "320000", "endcityid" : "320600", "endareaid" : "320612", "materialid" : "0", "material" : "", "specid" : "0", "productnid" : "0", "varietiesid" : "8", "varietiestypeid" : "621", "taskcode" : "t1611230481", "customerid" : "20147", "customername" : "", "createdate" : "2016-11-23 18:41:40", "warehousename" : "找钢仓库", "city" : "上海市", "area" : "虹口区", "startaddr" : "逸仙路25号", "endcity" : "南通市", "endarea" : "通州区", "endaddr" : "1", "varietiestypename" : "钢材", "varieties" : "线材", "productn" : "", "spec" : "", "weight" : "1", "num" : "1", "receiver" : "", "receiverphone" : "1", "remark" : "", "label" : "", "startaddrnumber" : "1", "varietiesnumber" : "1", "contactsid" : "22494", "contactsname" : "刘宇测试" } ]
front-endpage.js是分页加载的效果实现。代码为:
;(function($, window, document,undefined) { var cjjtable = function(ele,opt){ this.$element = ele, this.defaults ={ title:null, body:null, display:null, pagenumber:8, pagelength:0, url:null, dbtrclick:function(that){ } } this.options = $.extend({},this.defaults,opt) } cjjtable.prototype = { start:function(){ var _this = this; var titlelistbox=""; var titlesmall=""; for(var i=0;i<_this.options.title.length;i++){ titlesmall+="<th>"+_this.options.title[i]+"</th>"; titlelistbox = titlesmall; } var json = ""; var maxpagenumberbox = 7;//选择项最多的数量 var json = this.options.url; var histroy_ddbox = ""; var histroy_dd = ""; var firstpagenumber=_this.options.pagelength>_this.options.pagenumber?_this.options.pagenumber:_this.options.pagelength; for (var i = 0; i <firstpagenumber; i++) { var bodybigbox=""; var bodybox=""; for(var x=0;x<_this.options.body.length;x++){ var type = _this.options.body[x]; var display = "table-cell"; if(_this.options.body.length>_this.options.title.length&&_this.options.display[x]!=undefined){ display = _this.options.display[x]*1==1?"table-cell":"none"; } bodybox+="<td class='"+type+"' style='display:"+display+"'>"+json[i][type]+"</td>"; bodybigbox = bodybox; } histroy_dd +="<tr class='new_productbox'>"+bodybigbox+"</tr>"; histroy_ddbox = histroy_dd; } $( _this.$element.selector+" table tfoot").html(""); if (math.ceil(_this.options.pagelength/ _this.options.pagenumber) == 1) { $( _this.$element.selector+" .nextpage").css("display", "none"); $(_this.$element.selector+" .endpage").css("display", "none"); } var maxpagenumberboxbigbox = ""; var maxpagenumberboxbig = ""; if (math.ceil(_this.options.pagelength/ _this.options.pagenumber) < maxpagenumberbox) { for (var i = 0; i < math.ceil(_this.options.pagelength/ _this.options.pagenumber); i++) { var classname = ""; if(i==0){ classname = "pagenumberboxli"; } maxpagenumberboxbig += '<li class="'+classname+'">' + (i * 1 + 1) + '</li>'; maxpagenumberboxbigbox = maxpagenumberboxbig; } } else { for (var i = 0; i < maxpagenumberbox; i++) { var classname = ""; if(i==0){ classname = "pagenumberboxli"; } maxpagenumberboxbig += '<li class="'+classname+'">' + (i * 1 + 1) + '</li>'; maxpagenumberboxbigbox = maxpagenumberboxbig; } } var buttontfoot = "<tr>"+ "<td colspan='"+_this.options.title.length+"'>"+ "<div style='float:right;margin-left:10px;' class='tfootright'>"+ "<input placeholder='输入页码' type='text'>"+ "<button>确定</button>"+ "</div>"+ "<div style='float:right'>"+ "<span class='firstpage' style='margin-right:10px;cursor: pointer;float:left;display: none;margin-left:10px;'>首页</span>"+ "<span class='lastpage' style='margin-right:10px;cursor: pointer;float:left;display: none;'>上一页</span>"+ "<ul class='pagenumberbox'>"+maxpagenumberboxbigbox+"</ul>"+ "<input class='typenumber' type='text' value='1' onfocus='this.blur()' style='display:none;width:20px;height:20px;text-align:center;line-height:20px;border:1px solid #666;margin-right:5px;float:left;margin-top:2.5px;'>"+ "<span class='nextpage' style='margin-right:10px;float:left;cursor: pointer;'>下一页</span>"+ "<span class='endpage' style='cursor: pointer;float:left;'>尾页</span>"+ "</div>"+ "<div style='float:right'>"+ "<select><option value='5'>5</option><option value='10'>10</option><option value='20'>20</option><option value='50'>50</option><option value='100'>100</option><option value='200'>200</option><option value='500'>500</option></select>" "</div>"+ "</div>"+ "<td>"+ "<tr>"; _this.$element.html("<table class='cjj-table'><thead>"+titlelistbox+"</thead><tbody>"+histroy_ddbox+"</tbody><tfoot>"+buttontfoot+"</tfoot></table>"); $(_this.$element.selector+ ' select').val(_this.options.pagenumber); if(math.ceil(_this.options.pagelength/_this.options.pagenumber)<2){ $(_this.$element.selector+ ' .endpage').hide(); $(_this.$element.selector+ ' .nextpage').hide(); } $(_this.$element.selector+ ' .tfootright input').unbind('keyup').keyup(function(){ _this.inputkeyup(_this,maxpagenumberbox,json); }) $(_this.$element.selector+ ' .tfootright button').unbind('click').click(function(){ _this.button(_this,maxpagenumberbox,json); }); $(_this.$element.selector+ ' .firstpage').unbind('click').click(function(){ _this.firstpage(_this,maxpagenumberbox,json); }); $(_this.$element.selector+ ' .endpage').unbind('click').click(function(){ _this.endpage(_this,maxpagenumberbox,json); }); $(_this.$element.selector+ ' .nextpage').unbind('click').click(function(){ _this.nextpage(_this,maxpagenumberbox,json); }); $(_this.$element.selector+ ' table tfoot ul li').unbind('click').click(function(){ _this.nexttableli(_this,maxpagenumberbox,json,$(this)); }); $(_this.$element.selector+ ' .lastpage').unbind('click').click(function(){ _this.lastpage(_this,maxpagenumberbox,json); }); $(_this.$element.selector+ ' select').unbind('change').change(function(){ _this.select(_this,maxpagenumberbox,json,$(this)); }); $(_this.$element.selector+ ' tbody tr').unbind('dblclick').dblclick(function(){ _this.options.dbtrclick($(this)); }); }, inputkeyup:function(e,maxpagenumberbox,json){ var val = $(e.$element.selector+ " .tfootright input").val(); if (val == 0) { var val2 = val.replace(0, ""); } else if (val > 0 && val <= math.ceil(e.options.pagelength / e.options.pagenumber)) { var val2 = val.replace(/[^0-9]/g, ""); } else if (val > math.ceil(e.options.pagelength/ e.options.pagenumber)) { var val2 = math.ceil(e.options.pagelength / e.options.pagenumber); } $(e.$element.selector+ ' .tfootright input').val(val2); }, button:function(e,maxpagenumberbox,json){ var val = $(e.$element.selector+ ' .tfootright input').val(); $(e.$element.selector+ " .typenumber").val(val); if (val != "") { e.page($(e.$element.selector+ " .typenumber").val(), e.options.pagenumber, maxpagenumberbox,json,e.$element, e); } }, firstpage:function(e,maxpagenumberbox,json){ $(e.$element.selector+ " .typenumber").val(1); e.page($(e.$element.selector+ " .typenumber").val(), e.options.pagenumber, maxpagenumberbox,json,e.$element, e); }, endpage:function(e,maxpagenumberbox,json){ $(e.$element.selector+ " .typenumber").val(math.ceil(e.options.pagelength / e.options.pagenumber)); e.page($(e.$element.selector+ " .typenumber").val(), e.options.pagenumber, maxpagenumberbox,json,e.$element, e); }, nextpage:function(e,maxpagenumberbox,json){ var number = $(e.$element.selector+ " .typenumber").val(); $(e.$element.selector+ " .typenumber").val(number * 1 + 1); e.page($(e.$element.selector+ " .typenumber").val(), e.options.pagenumber, maxpagenumberbox,json,e.$element, e); }, nexttableli:function(e,maxpagenumberbox,json,that){ var val = that.html(); $(e.$element.selector+ " .typenumber").val(val); e.page($(e.$element.selector+ " .typenumber").val(), e.options.pagenumber, maxpagenumberbox,json,e.$element, e); }, lastpage:function(e,maxpagenumberbox,json){ var number = $(e.$element.selector+ " .typenumber").val(); if (number > 1) { $(e.$element.selector+ " .typenumber").val(number * 1 - 1); e.page($(e.$element.selector+ " .typenumber").val(), e.options.pagenumber, maxpagenumberbox,json,e.$element, e); } }, select:function(e,maxpagenumberbox,json,that){ var select = that.find("option:selected").val(); $(e.$element.selector+ " .typenumber").val(1); e.options.pagenumber = select; e.page($(e.$element.selector+ " .typenumber").val(), e.options.pagenumber, maxpagenumberbox,json,e.$element, e); }, page:function(pagenumber, pagenumber, maxpagenumberbox,json,that,e) { var histroy_ddbox = ""; var histroy_dd = ""; var lastpage=pagenumber<math.ceil(e.options.pagelength / pagenumber)?pagenumber*pagenumber:e.options.pagelength; for (var i =(pagenumber-1)*pagenumber; i < lastpage; i++) { var bodybigbox=""; var bodybox=""; for(var x=0;x<e.options.body.length;x++){ var type = e.options.body[x]; var display = "table-cell"; if(e.options.body.length>e.options.title.length&&e.options.display[x]!=undefined){ display = e.options.display[x]*1==1?"table-cell":"none"; } bodybox+="<td class='"+type+"' style='display:"+display+"'>"+json[i][type]+"</td>"; bodybigbox = bodybox; } histroy_dd +="<tr class='new_productbox'>"+bodybigbox+"</tr>"; histroy_ddbox = histroy_dd; } $(that.selector+" table tbody").html(histroy_dd); var maxpagenumberboxbigbox = ""; var maxpagenumberboxbig = ""; if (math.ceil(e.options.pagelength/ e.options.pagenumber) < maxpagenumberbox) { for (var i = 0; i < math.ceil(e.options.pagelength/ e.options.pagenumber); i++) { var classname = ""; if(i==0){ classname = "pagenumberboxli"; } maxpagenumberboxbig += '<li class="'+classname+'">' + (i * 1 + 1) + '</li>'; maxpagenumberboxbigbox = maxpagenumberboxbig; } } else { for (var i = 0; i < maxpagenumberbox; i++) { var classname = ""; if(i==0){ classname = "pagenumberboxli"; } maxpagenumberboxbig += '<li class="'+classname+'">' + (i * 1 + 1) + '</li>'; maxpagenumberboxbigbox = maxpagenumberboxbig; } } $(that.selector+" table tfoot ul").html(maxpagenumberboxbigbox); if (pagenumber == 1) { $(that.selector+" .firstpage,"+that.selector+" .lastpage").hide(); } else { $(that.selector+" .firstpage,"+that.selector+" .lastpage").show(); } if (pagenumber == math.ceil(e.options.pagelength / pagenumber)) { $(that.selector+" .endpage,"+that.selector+" .nextpage").hide(); } else { $(that.selector+" .endpage,"+that.selector+" .nextpage").show(); } if (math.ceil(e.options.pagelength/ pagenumber) > maxpagenumberbox) { if (pagenumber > 0 && pagenumber < math.ceil(maxpagenumberbox / 2) * 1 + 1) { maxpagenumberboxbigbox = ""; maxpagenumberboxbig = ""; for (var i = 0; i < maxpagenumberbox; i++) { maxpagenumberboxbig += '<li>' + (i * 1 + 1) + '</li>'; maxpagenumberboxbigbox = maxpagenumberboxbig; } $(that.selector+" .pagenumberbox").html(maxpagenumberboxbigbox); $(that.selector+' .pagenumberbox li').eq(pagenumber - 1).addclass('pagenumberboxli'); } else if (pagenumber >= math.ceil(maxpagenumberbox / 2) * 1 + 1 && pagenumber < math.ceil(e.options.pagelength / pagenumber) - math.ceil(maxpagenumberbox / 2) + 2) { maxpagenumberboxbigbox = ""; maxpagenumberboxbig = ""; for (var i = pagenumber - math.ceil(maxpagenumberbox / 2) + 1; i < pagenumber * 1 + math.ceil(maxpagenumberbox / 2) * 1; i++) { maxpagenumberboxbig += '<li>' + (i) + '</li>'; maxpagenumberboxbigbox = maxpagenumberboxbig; } $(that.selector+" .pagenumberbox").html(maxpagenumberboxbigbox); $(that.selector+' .pagenumberbox li').eq(math.ceil(maxpagenumberbox / 2) - 1).addclass('pagenumberboxli'); } else if (pagenumber >= math.ceil(e.options.pagelength / pagenumber) - math.ceil(maxpagenumberbox / 2) + 2 && pagenumber <= math.ceil(e.options.pagelength / pagenumber)) { maxpagenumberboxbigbox = ""; maxpagenumberboxbig = ""; for (var i = math.ceil(e.options.pagelength / pagenumber) - maxpagenumberbox; i < math.ceil(e.options.pagelength / pagenumber); i++) { maxpagenumberboxbig += '<li>' + (i * 1 + 1) + '</li>'; maxpagenumberboxbigbox = maxpagenumberboxbig; } $(that.selector+" .pagenumberbox").html(maxpagenumberboxbigbox); $(that.selector+' .pagenumberbox li').eq(pagenumber - math.ceil(e.options.pagelength/ pagenumber) + maxpagenumberbox * 1 - 1).addclass('pagenumberboxli'); } } else { if (pagenumber <= math.ceil(e.options.pagelength / pagenumber)) { $(that.selector+' .pagenumberbox li').removeclass('pagenumberboxli'); $(that.selector+' .pagenumberbox li').eq(pagenumber - 1).addclass('pagenumberboxli'); } } $(that.selector+ ' table tfoot ul li').unbind('click').click(function(){ e.nexttableli(e,maxpagenumberbox,json,$(this)); }); $(that.selector+ ' tbody tr').unbind('dblclick').dblclick(function(){ e.options.dbtrclick($(this)); }); } } $.fn.cjjtable = function(options){ var cjj = new cjjtable(this,options); return cjj.start(); } })(jquery, window, document);
以上就是这个效果的全部内容,有兴趣的朋友测试一下,需要注意的就是在数据js中,数据格式和重要,需要增加附加数据一定要确保id名唯一。感谢你对的支持。