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