Maison > Article > interface Web > 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>',{ 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(); };
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 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!