这次给大家带来jquery+ajax怎么样实现动态数据分页，用jquery+ajax实现动态数据分页的注意事项有哪些，下面就是实战案例，一起来看一下。
用jquery实现页码跳转式动态数据分页这个效果，这个效果最明显的就是没有数据加载和刷新页面这个过程，再做小型数据的加载也多级网页加载的时候很有效。
下面我们给出全部效果代码：
html全部代码：
<!doctype html>
<html>
<head>
<met
}
});*/
</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+"'>+
<p style='float:right;margin-left:10px;' class='tfootright'>+
<input placeholder='输入页码' type='text'>+
<button>确定</button>+
</p>+
<p 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>+
</p>+
<p 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>
</p>+
</p>+
<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);
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
html+css+jquery实现轮播广告图
html+css+jquery实现楼层滚动效果
以上就是jquery+ajax怎么样实现动态数据分页的详细内容。