Explication détaillée d'ajax + jtemplate pour implémenter la pagination dynamique

jtemplate est un plug-in de moteur de modèles basé sur JQuery, qui est très puissant. Avec lui, vous n'avez plus à vous soucier d'utiliser JS pour lier des ensembles de données. Cet article partagera avec vous ajax + jtemplate pour réaliser une pagination dynamique. Les amis qui en ont besoin peuvent se référer à cet article

jtemplate est un plug-in de moteur de modèles basé sur JQuery Il est très puissant. plus besoin de lier JS Inquiet pour l'ensemble de données.

L'idée principale est de copier la zone de texte en tant que modèle, de charger les données json avec ajax, d'ajouter des modèles, de lier les données et de mettre à jour pour charger plus d'événements.

//加载更多

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();
};

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Articles associés :

Implémentation simple d'Ajax pour afficher la progression lors de la requête

jquery obtient des informations en arrière-plan via AJAX Et la classe d'implémentation affichée sur la table

JQuery Ajax génère dynamiquement la table Table

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!