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($(‘

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实现动态分页，希望大家喜欢。

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。