首页 > web前端 > js教程 > 详解ajax +jtemplate实现动态分页

详解ajax +jtemplate实现动态分页

亚连
发布: 2018-05-24 17:37:09
原创
1929 人浏览过

jtemplate是一个基于JQuery的模板引擎插件,功能非常强大,有了她你就再不用为使用JS绑定数据集而发愁了。本文给大家分享ajax +jtemplate实现动态分页,需要的朋友可以参考下本文

jtemplate是一个基于JQuery的模板引擎插件,功能非常强大,有了她你就再不用为使用JS绑定数据集而发愁了。

主要思路,复制textarea作为模板,ajax加载json数据,添加模板,绑定数据,更新加载更多事件。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

//加载更多

 

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

};

登录后复制

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

Ajax在请求过程中显示进度的简单实现

jquery通过AJAX从后台获取信息并显示在表格上的实现类

JQuery Ajax动态生成Table表格

以上是详解ajax +jtemplate实现动态分页的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板