Heim > Web-Frontend > js-Tutorial > Detaillierte Erklärung von Ajax +jtemplate zur Implementierung dynamischer Paging

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

亚连
Freigeben: 2018-05-24 17:37:09
Original
1874 Leute haben es durchsucht

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();
};
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage