首页 新闻 赞助 找找看

只用纯前端,没有数据库,想用ajax调用json怎么动态创建分页?

0
悬赏园豆:10 [已解决问题] 解决于 2017-03-31 09:07

只用纯前端,没有数据库,想用ajax调用json怎么动态创建分页?

从网上查了好多都是用数据库调用的ajax,纯前端怎么做,研究了好久也没有想出来,拜托各位大神帮帮忙,急需要你们的帮助

小短腿奔跑吧的主页 小短腿奔跑吧 | 初学一级 | 园豆:136
提问于:2017-03-24 09:27
< >
分享
最佳答案
0

 你总要存数据吧。

假设你直接放了10个json文件——明白了吗?

这就是没代码灵活控制相对死的。

收获园豆:10
花飘水流兮 | 专家六级 |园豆:13540 | 2017-03-24 10:59

不明白,我的数据已经写在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的数据

 

小短腿奔跑吧 | 园豆:136 (初学一级) | 2017-03-24 11:07

@小短腿奔跑吧: js/groupExhibition.json

这个你有吗?就是上面提到的json文件(基于你没代码,没数据库)

花飘水流兮 | 园豆:13540 (专家六级) | 2017-03-24 11:10

@花飘水流兮: 有啊,这里面都是我写的数据,以下就是

[
{"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":"墨西哥"}
]
小短腿奔跑吧 | 园豆:136 (初学一级) | 2017-03-24 11:12

我想做的效果就是这个样子的,插件是http://luis-almeida.github.io/jPages/,但不知道怎么把数据放进去

小短腿奔跑吧 | 园豆:136 (初学一级) | 2017-03-24 12:48
其他回答(3)
0

好像有一种能够实现,就是 js 模拟服务器返回的请求好像是:modernizr.js  参见: https://modernizr.com/

pengbg | 园豆:13 (初学一级) | 2017-03-24 11:09
0

话说题主干嘛不用实现分页了的插件,有的插件是已经实现分页了的。只是json返回的格式要按照插件的格式来

最佳损友。 | 园豆:63 (初学一级) | 2017-03-24 15:39
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,直接就可以实现

小短腿奔跑吧 | 园豆:136 (初学一级) | 2017-03-31 09:05
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册