Detailed explanation of ajax +jtemplate to implement dynamic paging

jtemplate is a template engine plug-in based on JQuery. It is very powerful. With her, you no longer have to worry about using JS to bind data sets. This article will share with you ajax jtemplate to implement dynamic paging. Friends who need it can refer to this article

jtemplate is a template engine plug-in based on JQuery. It is very powerful. With it, you no longer need to bind data using JS. Gathered and worried.

The main idea is to copy the textarea as a template, load json data with ajax, add templates, bind data, and update to load more events.

//加载更多

function fnLoad(data){
listData.Ajax.data.target_page=parseInt(data.currentPage)+1;
function addmore(){
listData.Ajax.load();
}
//动态变换加载更多标签
if(data.totalNums == 0){
$(“#loadOBj”).addClass(“font-disable”).html(“还没有录入数据！”).unbind(“click”);
}
if(data.hasNext){
$(“#loadOBj”).html(“加载更多”);
if(data.currentPage==1){
$(“#loadOBj”).bind(“click”,addmore);
}
}else{
$(“#loadOBj”).addClass(“font-disable”).html(“已经是最底端了！”).unbind(“click”);
}
}
//Ajaxcallback
function callBackList(data){
var nextHtml = $(‘#listTemplate').prop(“outerHTML”);
var $listObj = listPage==0? ‘#listObj' : ‘#listObj'+listPage;
var $nextListObj = ‘listObj'+(listPage+1);
$($listObj).setTemplateElement(‘listTemplate',null,{filter_data: false});
$($listObj).setParam(“imgDomain”, roomImgDomain);
$($listObj).processTemplate(data);
$($listObj).after($(‘<p></p>&#39;,{
id:$nextListObj,
class:&#39;list-wrap&#39;
})
);
$(‘#&#39;+$nextListObj).append(nextHtml);
listPage++;
var $firstH3 = $(“#listObj .view-box:first h3″);
$firstH3.next().show();
$firstH3.find(“span”).addClass(“h3-up”).removeClass(“h3-down”);
fnLoad(data);
}
});
}
//ajax
$Ajax.prototype.load = function(){
var _this = this;
$.ajax({
type: “post”,
url: _this.url,
dataType:&#39;json&#39;,
data: _this.data,
success: function(data){
if(_this.callBack){
_this.callBack(data, _this.id);
}else{
//console.log(“ajax未定义回调函数！”);
}
},
error:function(){
//console.log(“ajaxerror”);
}
});
}
 

//调用

function fnListAjax(){
this.Ajax = new $Ajax();
this.Ajax.url = “”;
this.Ajax.data = {};
}
var listData = new fnListAjax();
fnAjax();
function fnAjax(){
listData.Ajax.url = dataDomain+”/advert/detail.htm”;
listData.Ajax.data = {
code:&#39;index_web&#39;
};
listData.Ajax.callBack = fnCallBackView;
listData.Ajax.load();
};

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Simple implementation of Ajax to display progress during the request

jquery obtains information from the background through AJAX And display the implementation class on the table

JQuery Ajax dynamically generates the Table

The above is the detailed content of Detailed explanation of ajax +jtemplate to implement dynamic paging. For more information, please follow other related articles on the PHP Chinese website!