jQuery+ajax를 사용하여 동적 데이터 페이징을 구현하는 방법
- php中世界最好的语言원래의
- 2018-03-15 13:19:232028검색
이번에는 jQuery+ajax를 사용하여 동적 데이터 페이징을 구현하는 방법을 보여드리겠습니다. jQuery+ajax를 사용하여 동적 데이터 페이징을 구현할 때 주의해야 할 주의 사항은 무엇입니까? 다음은 실제 사례입니다. 봐.
jQuery를 사용하여 페이지 번호 점프 동적 데이터 페이징 효과를 얻으세요. 이 효과의 가장 확실한 효과는 데이터 로드 및 페이지 새로 고침 과정이 없다는 것입니다. 소규모 데이터 및 다단계 웹을 로드할 때도 매우 효과적입니다. 페이지.
아래에는 모든 효과 코드가 나와 있습니다.
HTML 전체 코드:
<!DOCTYPE html>
<html>
<head>
<met
}
});*/
</script>
</body>
</html>
where 실제 작업 중에 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);
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
위 내용은 jQuery+ajax를 사용하여 동적 데이터 페이징을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.