Home>

jtemplate is a template engine plugin based on jquery,Very powerful,With her, you don't have to worry about binding data sets with js.This article shares with you ajax + jtemplate to achieve dynamic paging,

jtemplate is a template engine plugin based on jquery,Very powerful,With her, you don't have to worry about binding data sets with js.

The main idea,Copy textarea as template,ajax load json data, add template,Binding data,Update loads more events.

//load more
function fnload (data) {
listdata.ajax.data.target_page=parseint (data.currentpage) +1;
function addmore () {
listdata.ajax.load ();
}
//Load more tags dynamically
if (data.totalnums == 0) {
$("#Loadobj"). Addclass ("font-disable"). Html ("No data has been 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 is already at 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 does not define a callback function! ");
}
},error:function () {
//console.log("ajaxerror ");
}
});
}
//transfer
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 has shared with you ajax + jtemplate for dynamic paging.Hope you like it.

  • Previous Javascript countdown to product spike (time synchronized with server time)
  • Next Detailed explanation of class declarations and object member references in C ++ programming