Detaillierte Erklärung von Ajax +jtemplate zur Implementierung dynamischer Paging

jtemplate ist ein auf JQuery basierendes Template-Engine-Plug-in, das sehr leistungsstark ist. Mit ihr müssen Sie sich keine Gedanken mehr über die Verwendung von JS zum Binden von Datensätzen machen. Dieser Artikel wird Ihnen Ajax + Jtemplate zur Verfügung stellen, um dynamisches Paging zu erreichen.

JTemplate ist ein auf JQuery basierendes Template-Engine Keine Notwendigkeit mehr, JS-Bindungen zu verwenden.

Die Hauptidee besteht darin, den Textbereich als Vorlage zu kopieren, JSON-Daten mit Ajax zu laden, Vorlagen hinzuzufügen, Daten zu binden und zu aktualisieren, um weitere Ereignisse zu laden.

//加载更多

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($(‘<p></p>&#39;,{
id:$nextListObj,
class:&#39;list-wrap&#39;
})
);
$(‘#&#39;+$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:&#39;json&#39;,
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:&#39;index_web&#39;
};
listData.Ajax.callBack = fnCallBackView;
listData.Ajax.load();
};

Das oben Gesagte habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

Einfache Ajax-Implementierung zur Anzeige des Fortschritts während der Anfrage

jquery erhält Informationen aus dem Hintergrund über AJAX Und Die in der Tabelle angezeigte Implementierungsklasse

JQuery Ajax generiert dynamisch die Tabellentabelle

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung von Ajax +jtemplate zur Implementierung dynamischer Paging. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!