jtemplate是一個(gè)基于JQuery的模板引擎插件，功能非常強(qiáng)大，有了她你就再不用為使用JS綁定數(shù)據(jù)集而發(fā)愁了。

主要思路，復(fù)制textarea作為模板，ajax加載json數(shù)據(jù)，添加模板，綁定數(shù)據(jù)，更新加載更多事件。

//加載更多function fnLoad(data){listData.Ajax.data.target_page=parseInt(data.currentPage)+1;function addmore(){listData.Ajax.load();}//動(dòng)態(tài)變換加載更多標(biāo)簽if(data.totalNums == 0){$(“#loadOBj”).addClass(“font-disable”).html(“還沒(méi)有錄入數(shù)據(jù)！”).unbind(“click”);}if(data.hasNext){$(“#loadOBj”).html(“加載更多”);if(data.currentPage==1){$(“#loadOBj”).bind(“click”,addmore);}}else{$(“#loadOBj”).addClass(“font-disable”).html(“已經(jīng)是最底端了！”).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未定義回調(diào)函數(shù)！”);}},error:function(){//console.log(“ajaxerror”);}});} //調(diào)用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();};

以上內(nèi)容給大家分享了ajax +jtemplate實(shí)現(xiàn)動(dòng)態(tài)分頁(yè)，希望大家喜歡。