Home > Web Front-end > JS Tutorial > body text

Detailed explanation of ajax +jtemplate to implement dynamic paging

亚连
Release: 2018-05-24 17:37:09
Original
1846 people have browsed it

jtemplate is a template engine plug-in based on JQuery. It is very powerful. With her, you no longer have to worry about using JS to bind data sets. This article will share with you ajax jtemplate to implement dynamic paging. Friends who need it can refer to this article

jtemplate is a template engine plug-in based on JQuery. It is very powerful. With it, you no longer need to bind data using JS. Gathered and worried.

The main idea is to copy the textarea as a template, load json data with ajax, add templates, bind data, and update to load more events.

//加载更多

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

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Simple implementation of Ajax to display progress during the request

jquery obtains information from the background through AJAX And display the implementation class on the table

JQuery Ajax dynamically generates the Table

The above is the detailed content of Detailed explanation of ajax +jtemplate to implement dynamic paging. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template