我們這次給大家?guī)?lái)的是用jQuery實(shí)現(xiàn)頁(yè)碼跳轉(zhuǎn)式動(dòng)態(tài)數(shù)據(jù)分頁(yè)這個(gè)效果，這個(gè)效果最明顯的就是沒(méi)有數(shù)據(jù)加載和刷新頁(yè)面這個(gè)過(guò)程，再做小型數(shù)據(jù)的加載也多級(jí)網(wǎng)頁(yè)加載的時(shí)候很有效。我們先來(lái)看下實(shí)際效果：
下面我們給出全部效果代碼：
HTML全部代碼：
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>jQuery實(shí)現(xiàn)頁(yè)碼跳轉(zhuǎn)式動(dòng)態(tài)數(shù)據(jù)分頁(yè)-武林網(wǎng)</title><script type="text/javascript" src="js/jquery-1.9.1.min.js"></script><!-- <script type="text/javascript" src="back-endPage.js"></script> --> <!-- 后臺(tái)分頁(yè) --><script type="text/javascript" src="js/front-endPage.js"></script><!-- 前臺(tái)分頁(yè) --><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"> //前臺(tái)分頁(yè)的樣子 $('#histroyBox').CJJTable({ 'title':["裝點(diǎn)","卸點(diǎn)","運(yùn)輸貨物","下單日期","作者"],//thead中的標(biāo)題 必填 'body':["taskCode","startAddr","endAddr","varietiesTypeName","createDate","customerName"],//tbody td 取值的字段 必填 'display':[1,1,1,1,1,2],//隱藏域，1顯示，2隱藏 必填 'pageNUmber':10,//每頁(yè)顯示的條數(shù) 選填 'pageLength':data.length,//選填 'url':data,//數(shù)據(jù)源 必填 dbTrclick:function(e){//雙擊tr事件 alert(e.find('.taskCode').html()) } }); //后臺(tái)分頁(yè)的樣子 /*$('#histroyBox').CJJTable({ 'title':["裝點(diǎn)","卸點(diǎn)","運(yùn)輸貨物","下單日期"],//thead中的標(biāo)題 必填 'body':["contactName","contactMobliePhone","carrierName","taskNum","taskCustomerExpectPrice","taskCustomerBudgetFreight"],//tbody td 取值的字段 必填 'display':[1,1,1,1,2,2],//隱藏域，1顯示，2隱藏 必填 'pageJson':{ "taskId":528710, "pageSize":100,//ajax請(qǐng)求參數(shù)中的每頁(yè)展示數(shù)量 選填 "token":"yJUmunFeG3REqisYAmCfeA" }, 'url':'api/quoted/quotedList',//數(shù)據(jù)源 必填 dbTrclick:function(that){ //雙擊tr事件 alert(that.find('.contactName').html()) } });*/</script></body></html>其中<script type="text/javascript" src="js/shujv2.js"></script>是數(shù)據(jù)JS內(nèi)容，大家在實(shí)際操作的時(shí)候可以用JS獲取json達(dá)到要的數(shù)據(jù)格式：
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" : "武林網(wǎng)", "createDate" : "2016-11-23 18:41:40", "wareHouseName" : "找鋼倉(cāng)庫(kù)", "city" : "上海市", "area" : "虹口區(qū)", "startAddr" : "逸仙路25號(hào)", "endCity" : "南通市", "endArea" : "通州區(qū)", "endAddr" : "1", "varietiesTypeName" : "鋼材", "varieties" : "線材", "productN" : "", "spec" : "", "weight" : "1", "num" : "1", "receiver" : "", "receiverPhone" : "1", "remark" : "", "label" : "", "startAddrNumber" : "1", "varietiesNumber" : "1", "contactsId" : "22494", "contactsName" : "劉宇測(cè)試" } ]front-endPage.js是分頁(yè)加載的效果實(shí)現(xiàn)。代碼為：
;(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;//選擇項(xiàng)最多的數(shù)量 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='輸入頁(yè)碼' 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;'>首頁(yè)</span>"+ "<span class='lastPage' style='margin-right:10px;cursor: pointer;float:left;display: none;'>上一頁(yè)</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;'>下一頁(yè)</span>"+ "<span class='endPage' style='cursor: pointer;float:left;'>尾頁(yè)</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);以上就是這個(gè)效果的全部?jī)?nèi)容，有興趣的朋友測(cè)試一下，需要注意的就是在數(shù)據(jù)JS中，數(shù)據(jù)格式和重要，需要增加附加數(shù)據(jù)一定要確保ID名唯一。感謝你對(duì)武林網(wǎng)的支持。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
