只用纯前端，没有数据库，想用ajax调用json怎么动态创建分页？
0
最佳答案
0
你总要存数据吧。
假设你直接放了10个json文件——明白了吗？
这就是没代码灵活控制相对死的。
收获园豆：10
不明白，我的数据已经写在json里面了，这个只是纯前端的，因为数据太多了，写在HTML太麻烦，所以想动态创建，动态生成，我知道jpage.js这个分页插件好多例子都是把数据直接写在HTML中，我不知道json这个怎么弄，帮帮我吧，看我这么可怜的份上，
$.ajax({ type:"get", url:"js/groupExhibition.json", async:true, success:function(data){ var arr = eval(data); for(var d=0;d<arr.length;d++){ var div = $("<div class='yb_contDiv'></div>"); var div1 = $("<div class='yb_contDivImg fl'></div>"); /*div1.html("<img src="+arr[d].img+" width='100%'; height='100%'>");*/ var div2 = $("<div class='yb_contDivword fl'></div>"); var h1 = $("<h3 class='yb_contH1'>"+arr[d].name+"</h3>"); var h2 = $("<h5 class='yb_contH2'>展会时间："+arr[d].time+"</h5>"); var h3 = $("<h5 class='yb_contH3'>展会地点："+arr[d].city+"</h5>"); div2.append(h1); div2.append(h2); div2.append(h3); var div3 = $("<div style='clear: both;'></div>"); div.append(div1); div.append(div2); div.append(div3); $(".s").append(div); } } })
这是我的调取json的数据
@小短腿奔跑吧: js/groupExhibition.json
这个你有吗？就是上面提到的json文件（基于你没代码，没数据库）
@花飘水流兮: 有啊，这里面都是我写的数据,以下就是
[ {"img":"img/timeImg/2017/20170117145106_7753.png","name":"2017年俄罗斯国际金属板材加工展-参展行程","time":"2017-03-12 至 03-17","city":"俄罗斯--莫斯科"}, {"img":"img/timeImg/2016/IMG_2263(1).JPG","name":"2017年印度国际金属板材加工展 (BLECH INDIA)-参展行程","time":"2017-04-26 至 04-30","city":"印度--孟买"}, {"img":"img/timeImg/2015/IMG_2303.JPG","name":"2017年马来西亚机床及金属加工展 (METALTECH)-参展行程","time":"2017-05-22 至 05-28","city":"马来西亚--吉隆坡"}, {"img":"img/timeImg/2016/IMG_2264(2).JPG","name":"2017年波兰波兹南机械工业展ITM-参展行程","time":"2017-06-04 至 06-10","city":"波兰--波兹南"}, {"img":"img/timeImg/2016/IMG_2271(1).JPG","name":"2017年菲律宾机床模具及金属加工展 (PDMAEC)-参展行程","time":"2017-08-22 至 08-27","city":"菲律宾--马尼拉"}, {"img":"img/timeImg/2016/IMG_2263(1).JPG","name":"2017年印度国际金属板材加工展 BLECH INDIA-参展行程","time":" 2017-04-27 至 04-29","city":"印度.孟买会展中心"}, {"img":"img/timeImg/2016/IMG_2268(1).JPG","name":"2017年捷克布尔诺机械工业展 捷克布尔诺机床展（MSV/IMT)-参展行程","time":"2017-10-08 至 10-15","city":"捷克--布尔诺"}, {"img":"img/timeImg/2017/20170117140629_3815.jpg","name":"2017年墨西哥国际金属加工和管材、焊接展 (FABTECH MEXICO)-参展行程","time":"2017-04-30 至 05-05","city":"墨西哥"} ]
我想做的效果就是这个样子的，插件是http://luis-almeida.github.io/jPages/，但不知道怎么把数据放进去
其他回答(3)
0
好像有一种能够实现，就是 js 模拟服务器返回的请求好像是：modernizr.js 参见: https://modernizr.com/
0
话说题主干嘛不用实现分页了的插件，有的插件是已经实现分页了的。只是json返回的格式要按照插件的格式来
0
$.ajax({ type:"get", url:"js/groupExhibition.json", async:true, success:function(data){ mycity(data); mymonth1(data) var arr = eval(data); for(var i=0;i<arr.length;i++) { var a = "<div class='yb_contDiv'>"+s+d+"</div>"; var s = "<div class='yb_contDivImg fl'><img src="+arr[i].img+" width='100%' height='100%'></div>" var d = "<div class='yb_contDivword fl'><h3 class='yb_divtext'>"+arr[i].name+"</h3><h5 class='yb_contH2'>展会时间：<span class='yb_divDate'>"+arr[i].time+"</span></h5><h5 class='yb_contH3'>展会地点：<span class='yb_divsite'>"+arr[i].city+"</span></h5><span class='exhibitionCategory dis'>"+arr[i].exhibition+"</span><span class='parentOrganization dis'>"+arr[i].Organization+"</span><span class='present dis'>"+arr[i].present+"</span><span class='Exhibits dis'>"+arr[i].Exhibits+"</span><span class='marketAnalysis dis'>"+arr[i].marketAnalysis+"</span></div><div style='clear: both;'></div>" $("#itemContainer").append(a); } $("div.holder").jPages({ containerID: "itemContainer" }); } });
插件用的是jPages.js，直接就可以实现
