这次给大家带来jquery+ajax怎么样实现动态数据分页，用jquery+ajax实现动态数据分页的注意事项有哪些，下面就是实战案例，一起来看一下。
用jQuery实现页码跳转式动态数据分页这个效果，这个效果最明显的就是没有数据加载和刷新页面这个过程，再做小型数据的加载也多级网页加载的时候很有效。
下面我们给出全部效果代码：
HTML全部代码：
<met } });*/
登录后复制
其中是数据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+=""+_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; i++) { var bodyBigBox=""; var bodyBox=""; for(var x=0;x_this.options.title.length&&_this.options.display[x]!=undefined){ display = _this.options.display[x]*1==1?"table-cell":"none"; } bodyBox+=""+json[i][type]+""; bodyBigBox = bodyBox; } histroy_DD +=""+bodyBigBox+""; 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 += '' + (i * 1 + 1) + ''; maxpagenumberBoxBigbox = maxpagenumberBoxBig; } } else { for (var i = 0; i < maxpagenumberBox; i++) { var className = ""; if(i==0){ className = "pagenumberBoxLi"; } maxpagenumberBoxBig += '
' + (i * 1 + 1) + ''; maxpagenumberBoxBigbox = maxpagenumberBoxBig; } } var buttonTfoot = ""+ ""+ ""+ "
"+ "首页"+ "上一页"+ "
"+maxpagenumberBoxBigbox+"
"+ ""+ "
下一页"+ "
尾页"+ "
"+ "
"+ "5102050100200500" "
"+ "
"+ ""+ ""; _this.$element.html(""+titlelistBox+""+histroy_DDBox+""+buttonTfoot+"
"); $(_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.pageLength / pageNUmber)?Pagenumber*pageNUmber:e.options.pageLength; for (var i =(Pagenumber-1)*pageNUmber; i < lastPage; i++) { var bodyBigBox=""; var bodyBox=""; for(var x=0;xe.options.title.length&&e.options.display[x]!=undefined){ display = e.options.display[x]*1==1?"table-cell":"none"; } bodyBox+=""+json[i][type]+""; bodyBigBox = bodyBox; } histroy_DD +=""+bodyBigBox+""; 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 += '
' + (i * 1 + 1) + ''; maxpagenumberBoxBigbox = maxpagenumberBoxBig; } } else { for (var i = 0; i < maxpagenumberBox; i++) { var className = ""; if(i==0){ className = "pagenumberBoxLi"; } maxpagenumberBoxBig += '
' + (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 < Math.ceil(maxpagenumberBox / 2) * 1 + 1) { maxpagenumberBoxBigbox = ""; maxpagenumberBoxBig = ""; for (var i = 0; i < maxpagenumberBox; i++) { maxpagenumberBoxBig += '
' + (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 < 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 += '
' + (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 <= 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 += '
' + (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 <= 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);
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
HTML+CSS+jQuery实现轮播广告图
html+css+jquery实现楼层滚动效果
以上就是jQuery+ajax怎么样实现动态数据分页的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2782543.html
