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”);}}//Ajaxcallbackfunction 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實現動態分頁，希望大家喜歡。