详解ajax +jtemplate实现动态分页

技术  /  管理员 发布于 8年前   166

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