Detailed explanation of Ajax + jtemplate to achieve dynamic paging

Time:2021-1-22

Jtemplate is a template engine plug-in based on jQuery, which is very powerful. With it, you don’t have to worry about using JS to bind data sets.

The main idea is to copy textarea as template, load JSON data with Ajax, add template, bind data, update and load more events.

//Load more

function fnLoad(data){
listData.Ajax.data.target_page=parseInt(data.currentPage)+1;
function addmore(){
listData.Ajax.load();
}
//Dynamic transformation loads more tags
if(data.totalNums == 0){
$("#loadobj"). Addclass ("font disable"). HTML ("no data entered yet!" ).unbind(“click”);
}
if(data.hasNext){
$("#loadobj"). HTML ("load more");
if(data.currentPage==1){
$(“#loadOBj”).bind(“click”,addmore);
}
}else{
$("#loadobj"). Addclass ("font disable"). HTML ("it's the bottom!" ).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($(‘<div></div>',{
id:$nextListObj,
class:'list-wrap'
})
);
$(‘#'+$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:'json',
data: _this.data,
success: function(data){
if(_this.callBack){
_this.callBack(data, _this.id);
}else{
// console.log ("Ajax has no callback function defined!" );
}
},
error:function(){
//console.log(“ajaxerror”);
}
});
}
 

//Call

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:'index_web'
};
listData.Ajax.callBack = fnCallBackView;
listData.Ajax.load();
};

The above content to share with you Ajax + jtemplate dynamic paging, I hope you like it.

Recommended Today

How to Build a Cybersecurity Career

Original text:How to Build a Cybersecurity Career How to build the cause of network security Normative guidelines for building a successful career in the field of information security fromDaniel miesslerstayinformation safetyCreated / updated: December 17, 2019 I’ve been doing itinformation safety(now many people call it network security) it’s been about 20 years, and I’ve spent […]