详解ajax +jtemplate实现动态分页

jtemplate是一个基于jquery的模板引擎插件，功能非常强大，有了她你就再不用为使用js绑定数据集而发愁了。

主要思路，复制textarea作为模板，ajax加载json数据，添加模板，绑定数据，更新加载更多事件。

//加载更多

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($(‘<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未定义回调函数！”);
}
},
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:'index_web'
};
listdata.ajax.callback = fncallbackview;
listdata.ajax.load();
};

以上内容给大家分享了ajax +jtemplate实现动态分页，希望大家喜欢。