Heim >Web-Frontend >js-Tutorial >So implementieren Sie dynamisches Daten-Paging mit jQuery+Ajax
Dieses Mal zeige ich Ihnen, wie Sie dynamisches Daten-Paging mit jQuery + Ajax implementieren. Was sind die Vorsichtsmaßnahmen für die Implementierung dynamischer Daten-Paging? Das Folgende ist ein praktischer Fall ein Blick.
Verwenden Sie jQuery, um den Effekt des dynamischen Daten-Pagings mit Seitennummernsprung zu erzielen. Der offensichtlichste Effekt dieses Effekts besteht darin, dass kein Datenlade- und Seitenaktualisierungsprozess stattfindet. Er ist auch beim Laden kleiner Datenmengen sehr effektiv Laden mehrstufiger Webseiten.
Nachfolgend geben wir alle Effektcodes an:
HTML-Vollcode:
nbsp;html> <met> </met>
wobei < ;script type="text/javascript" src="js/shujv2.js"> ist der JS-Inhalt. Während des tatsächlichen Betriebs können Sie JSON verwenden, um das gewünschte Datenformat zu erreichen:
shujv2.js-Code:
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.jsJa Der Effekt des Paging-Ladens wird realisiert. Der Code lautet:
;(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>"+_this.options.title[i]+""; 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>_this.options.title.length&&_this.options.display[x]!=undefined){ display = _this.options.display[x]*1==1?"table-cell":"none"; } bodyBox+="<td>"+json[i][type]+"</td>"; bodyBigBox = bodyBox; } histroy_DD +="<tr>"+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) ' + (i * 1 + 1) + ''; maxpagenumberBoxBigbox = maxpagenumberBoxBig; } } else { for (var i = 0; i ' + (i * 1 + 1) + ''; maxpagenumberBoxBigbox = maxpagenumberBoxBig; } } var buttonTfoot = "<tr>"+ "<td>"+ "<p>"+ "<input>"+ "<button>确定</button>"+ "</p>"+ "<p>"+ "<span>首页</span>"+ "<span>上一页</span>"+ "</p> <ul>"+maxpagenumberBoxBigbox+"</ul>"+ "<input>"+ "<span>下一页</span>"+ "<span>尾页</span>"+ ""+ "<p>"+ "<select><option>5</option> <option>10</option> <option>20</option> <option>50</option> <option>100</option> <option>200</option> <option>500</option></select>" "</p>"+ ""+ "</td> <td>"+ "</td> </tr> <tr>"; _this.$element.html("<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) 0 && 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.title.length&&e.options.display[x]!=undefined){ display = e.options.display[x]*1==1?"table-cell":"none"; } bodyBox+="<td>"+json[i][type]+"</td>"; bodyBigBox = bodyBox; } histroy_DD +="<tr>"+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) ' + (i * 1 + 1) + ''; maxpagenumberBoxBigbox = maxpagenumberBoxBig; } } else { for (var i = 0; i ' + (i * 1 + 1) + ''; 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 ' + (i * 1 + 1) + ''; 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 ' + (i) + ''; 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 ' + (i * 1 + 1) + ''; 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 <p> Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website! </p> <p>Empfohlene Lektüre: </p> <p><a href="http://www.php.cn/js-tutorial-388657.html" target="_blank">HTML+CSS+jQuery zur Realisierung des Karussell-Werbebildes</a></p> <p><a href="http://www.php.cn/js-tutorial-388656.html" target="_blank">HTML+CSS+jQuery zur Realisierung des Bodens Scrolleffekt</a></p></math.ceil> </tr></firstpagenumber></_this.options.title.length>
Das obige ist der detaillierte Inhalt vonSo implementieren Sie dynamisches Daten-Paging mit jQuery+Ajax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!