这次给大家带来jquery+ajax怎么样实现动态数据分页，用jquery+ajax实现动态数据分页的注意事项有哪些，下面就是实战案例，一起来看一下。
用jQuery实现页码跳转式动态数据分页这个效果，这个效果最明显的就是没有数据加载和刷新页面这个过程，再做小型数据的加载也多级网页加载的时候很有效。
下面我们给出全部效果代码：
HTML全部代码：
其中是数据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 _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+"
"+
""+
"下一页"+
"尾页"+
""+
""+
""
"
"+
""+
" "+
" ";
_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);相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
相关文章
如何用JavaScript发送AJAX请求_与服务器如何通信
javascript能做什么_为什么它是前端开发的核心？
Rails 7 中非模块化第三方 JS 库的正确集成方案
Rails 7 中非模块化第三方 JS 库的正确引入方式
如何使用 Ajax 动态填充多个 HTML 标签页中的下拉选项
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热门AI工具
更多
相关专题
更多
Java 桌面应用开发（JavaFX 实战）
本专题系统讲解 Java 在桌面应用开发领域的实战应用，重点围绕 JavaFX 框架，涵盖界面布局、控件使用、事件处理、FXML、样式美化（CSS）、多线程与UI响应优化，以及桌面应用的打包与发布。通过完整示例项目，帮助学习者掌握 使用 Java 构建现代化、跨平台桌面应用程序的核心能力。
37
2026.01.14
热门下载
更多
相关下载
更多
精品课程
更多
相关推荐 /
热门推荐 /
最新课程
jQuery 教程
共42课时 | 4.2万人学习
Mock.js | Axios.js | Json | Ajax--十天精品课堂
共7课时 | 0.5万人学习
HTML+CSS基础与实战
共132课时 | 9.5万人学习
最新文章
更多
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
