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.