我們這次給大家?guī)淼氖怯胘Query實現頁碼跳轉式動態(tài)數據分頁這個效果，這個效果最明顯的就是沒有數據加載和刷新頁面這個過程，再做小型數據的加載也多級網頁加載的時候很有效。我們先來看下實際效果：

10年積累的網站制作、網站設計經驗，可以快速應對客戶對網站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網絡服務。我雖然不認識你，你也不認識我。但先網站制作后付款的網站建設流程，更有蕭縣免費網站建設讓你可以放心的選擇與我們合作。

下面我們給出全部效果代碼：

HTML全部代碼：

其中是數據JS內容，大家在實際操作的時候可以用JS獲取json達到要的數據格式：

shujv2.js代碼：

front-endPage.js是分頁加載的效果實現。代碼為：

"+ ""+ ""; _this.$element.html(""+titlelistBox+""+histroy_DDBox+""+buttonTfoot+""); $(_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=Pagenumbere.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);