基于JSON实现数据列表翻页显示.docx
《基于JSON实现数据列表翻页显示.docx》由会员分享，可在线阅读，更多相关《基于JSON实现数据列表翻页显示.docx（11页珍藏版）》请在冰豆网上搜索。
基于JSON实现数据列表翻页显示
（1）
2010-08-1809:
03吴砥51CTO.com我要评论
（2）
本文要介绍的是一种采用纯前台方案，可以实现数据列表显示过程的翻页功能，其特点是以JSON,jQuery和Trimpath来实现前台数据的列表显示与翻页控制，整个过程中不依赖后台。
【51CTO独家特稿】在Web开发过程中，我们常常要实现大量同结构数据在网页上的列项/列表显示，相当多的时间都花在数据显示的处理上。
而数据列表显示过程中的翻页功能，则是Web开发中非常常用的功能，有多种实现方法。
由于涉及到显示页面的数据更新问题，因此，多数实现方法往往用到前后台交互功能，利用后台逻辑控制功能来提供支持，完成前台数据显示的翻页功能。
这样的处理方式，的确可以解决很多情况下的实际问题，然而代价是增加了前后台交互的次数，每一次翻页都要请求后台逻辑控制程序和后台数据库，也增加了用户等待时间。
本文要介绍的是一种采用纯前台方案，可以实现数据列表显示过程的翻页功能，其特点是以JSON,jQuery和Trimpath来实现前台数据的列表显示与翻页控制，整个过程中不依赖后台，不需要用到任何JSP,PHP,ASP或其他动态网页代码，属于纯前台程序，在使用时，为用户提供了很大的灵活性。
具体实现过程包括如下步骤：
1、将需要列表翻页显示的数据处理为JSON的格式，如代码1所示。
为简易起见，这里仅列出九条数据，实际上可以有更多条数据包含于JSON文件中，通过AJAX方式从后台请求得到存有数据的JSON对象，或者也可以直接采用前台jQuery加载JSON文件的方式得到。
（相关文章推荐：
理解jQuery解析JSON数据对象原理）
1代码1：
2list.json
3
4{
5"todo":
[
6{
7"task":
"GotoUS",
8"time":
"2010-09-05",
9"location":
"PA"
10},
11{
12"task":
"ComebackChina",
13"time":
"2010-09-15",
14"location":
"Beijing"
15},
16{
17"task":
"Gotolab",
18"time":
"2010-09-20",
19"location":
"Wuhan"
20},
21{
22"task":
"GotoShopping",
23"time":
"2010-09-25",
24"location":
25},
26{
27"task":
"Attendconference",
28"time":
"2010-09-30",
29"location":
30},
31{
32"task":
"ViewTV",
33"time":
"2010-10-01",
34"location":
35},
36{
37"task":
"ViewSAKAI",
38"time":
"2010-10-02",
39"location":
40},
41{
42"task":
"ViewMovie",
43"time":
44"location":
45},
46{
47"task":
"Reviewpapers",
48"time":
"2010-10-03",
49"location":
50}
51]
52}
2、编写前台显示代码，采用Trimpath模板编写列表数据的模板化显示部分，如代码2所示。
在这里，采用Trimpath模板来编写表格体（tbody）中的内容，采用名为list_container的div作为目标显示容器。
1代码2：
2list.html
DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01//EN""http:
//www.w3.org/TR/html4/strict.dtd">
4
5
6
7
8
9
10
11
12
13
14
15
16
17ItemsperPage:
18
19
20
21none;">22232425Task26Time27Location28293031{foritemintodo}3233${item.task}34${item.time}35${item.location}3637{/for}383940previous4142next43444546
none;">
22
232425Task26Time27Location2829
24
25Task
26Time
27Location
28
29
30
31{foritemintodo}
32
33
34
35
36
37{/for}
38
39
40previous
41
42next
43
44
45
46
47
48none;">
49
50
51
52
3、采用CSS样式，对显示页面予以修饰，如代码3所示。
53代码3：
54list.css
55form{margin:
10px0;}
56table{border-width:
1px;border-style:
solid;width:
600px;}
57td{border-width:
solid;padding:
3px5px;}
58thead{font-weight:
bold;background-color:
#F0F0F0;}
59
60#list_input_pagesize_container{margin:
61#list_input_pagesize{width:
50px;}
62#list_next{float:
right;}
63#list_previous{float:
left;}
64#list_td_foot{text-align:
center;}
65#list_td_task{width:
50%}
66#list_td_time{width:
20%}
67#list_td_location{width:
30%}
4、采用jQuery来控制前台翻页显示（如代码4所示），这是本方法的关键。
需要用到jQuery的JSON处理功能和Trimpath模板加载功能，该方法的主要思路是：
将所需显示的包含全部目标数据的JSON对象拆分成多个JSON对象，集中存入一个数组，数组中每个JSON对象对应包含一个页面需要显示的内容，然后根据用户对页码的选择，将与页码对应的那个JSON对象送到Trimpath模板加载，在页面上显示出来。
当用户在页面上点击“前一页”、“后一页”链接进行翻页控制的时候，就更换要加载的JSON数据对象，这样就可以在不刷新页面的情况下实现快速的翻页响应，由于是纯前台控制，不需请求后台，唯一的时间消耗只是重新加载一遍前台模板，因此速度很快。
该程序中采用了三个对象，分别是：
1）json:
类型为JSON对象，功能是用来存储初始获得的JSON对象，其中包含所有需要显示的数据；
2）data:
类型是数组，功能是用来存储经过了拆分处理的每一页需要显示的JSON对象的集合，如前所述；
3）info:
类型是JSON对象，功能是用来存储翻页显示过程中的控制信息（如：
currentPageNo,pageSize等）。
另外，该程序还提供了页面尺寸修改的功能，可以供用户修改每一页显示的数据项数。
1代码4：
2list.js
3varpageShow=function（）{
4varjson={};//Theoriginaljsonobject
5vardata=[];//Thearrayofallpagelist,includeseachpageitems
6varinfo={};//Thejsonobjecttosavepageinformation
8vargetPageSize=function（）{returninfo.pageSize;};
9varsetPageSize=function（pageSize）{info.pageSize=pageSize;};
10vargetItemNumber=function（）{returninfo.itemNumber;};
11varsetItemNumber=function（itemNumber）{info.itemNumber=itemNumber;};
12vargetPageNumber=function（）{returninfo.pageNumber;};
13varsetPageNumber=function（pageNumber）{info.pageNumber=pageNumber;};
14vargetCurrentPageNo=function（）{returninfo.currentPageNo;};
15varsetCurrentPageNo=function（currentPageNo）{info.currentPageNo=currentPageNo;};
17varloadTemplate=function（json）{
18$（"#list_container"）.hide（）;
19$（"#list_container"）.html（TrimPath.processDOMTemplate（"list_template",json））;
20$（"#list_container"）.show（）;
21};
23varshowPageNo=function（）{
24$（"#list_pageno"）.text（getCurrentPageNo（）+"/"+getPageNumber（））;
25};
26
27varshowPreviousPage=function（）{
28varcurrentPageNo=getCurrentPageNo（）;
29varpageNumber=getPageNumber（）;
30if（currentPageNo!
=1）{
31currentPageNo--;
32setCurrentPageNo（currentPageNo）;
33loadTemplate（data[currentPageNo-1]）;
34showPageNo（）;
35}
36};
37
38varshowNextPage=function（）{
39varcurrentPageNo=getCurrentPageNo（）;
40varpageNumber=getPageNumber（）;
41if（currentPageNo!
=pageNumber）{
42currentPageNo++;
43setCurrentPageNo（currentPageNo）;
44loadTemplate（data[currentPageNo-1]）;
45showPageNo（）;
46}
47};
48
49varshowData=function（）{
50varpageSize=getPageSize（）;
51setPageSize（pageSize）;
53varitemNumber=json.todo.length;
54setItemNumber（itemNumber）;
55
56varpageNumber=0;
57if（itemNumber%pageSize==0）{
58varpageNumber=itemNumber/pageSize;
59}
60else{
61pageNumber=Math.floor（itemNumber/pageSize）+1;
62}
63setPageNumber（pageNumber）;
64
65varcurrentPageNo=1;
66setCurrentPageNo（currentPageNo）;
67
68//Validateifthereisonlyonepage
69if（pageNumber==1）{
70loadTemplate（json）;
71showPageNo（）;
72}
73else{
74for（vari=0,j=0;i75if（!data[j]）{76data[j]=$.parseJSON（'{"todo":[]}'）;77}78data[j].todo[i]=json.todo[i];79if（i%getPageSize（）==getPageSize（）-1）{80j++;81}82}8384loadTemplate（data[getCurrentPageNo（）-1]）;8586showPageNo（）;87}88};8990vargetData=function（path）{91$.getJSON（path,function（data）{92json=data;93showData（）;94}）;95};9697varinitPageShow=function（）{98setPageSize（5）;99$（"#list_input_pagesize"）.val（getPageSize（））;100varpath="/list/data/list.json";101getData（path）;102103$（"#list_button_pagesize"）.bind（"click",function（）{104varnewPageSize=parseInt（$（"#list_input_pagesize"）.val（））;105setPageSize（newPageSize）;106data=[];107showData（）;108$（"#list_input_pagesize"）.focus（）;109returnfalse;110}）;111$（"#list_previous"）.live（"click",function（）{112showPreviousPage（）;113returnfalse;114}）;115$（"#list_next"）.live（"click",function（e）{116showNextPage（）;117returnfalse;118}）;119$（"#list_input_pagesize"）.focus（）;120};121122initPageShow（）;123}124125varinit=function（）{126pageShow（）;127}128129init（）;5、程序中所有文件的存储结构如图1所示。图16、程序运行结果如图2所示。图2综上所述，本文所介绍的翻页显示控制方法避免了前后台交互的问题，使前台程序可以独立运转，独立控制翻页，而无需依赖后台支持，使用过程较为灵活，用户响应时间很短，无需刷新页面和请求后台数据，具有很高的效率。在使用过程中，可以将其中的翻页函数以jQuery函数调用方式予以应用。 展开阅读全文 相关资源 小学语文专题：“桃花”诗词50句.docx 熔模铸造工艺的原理及特点.docx 500MW-火力发电厂-设计.doc 供应室职业防护课件.pptx 党纪学习教育读书班学习六大（六项）纪律研讨交流发言（政治纪律、组织纪律、廉洁纪律、群众纪律、工作纪律、生活纪律）.docx 小针刀疗法课件.pptx 部编版四年级语文(下册)期末复习及答案.doc 建筑工地现场消防安全常识培训教材.ppt 最新-中国共产党纪律处分条例PPT.pptx 中国慢性呼吸道疾病呼吸康复管理指南解读PPT课件.pptx 猜你喜欢 基于FPGA和MCU的相位测量仪的设计毕业设计.docx 基于PLC控制的自动供料及加工系统设计.docx 湖北省鄂州市中考理综物理部分试题扫描版含答案.docx 加油站租赁合同.docx 脚手架施工方案范本.docx 教师做学生最喜欢的老师演讲稿总11页.docx 届二轮复习专题六选考模块教案.docx 恒心江西省吉安一中届高三下学期第一次模拟考试数学理科试题及参考答案纯Word版.docx 化学检验工国家职业标准.docx 相关搜索 基于 JSON 实现 数据 列表 翻页 显示 当前位置：首页 > 初中教育 > 中考
75if（!
data[j]）{
76data[j]=$.parseJSON（'{"todo":
[]}'）;
77}
78data[j].todo[i]=json.todo[i];
79if（i%getPageSize（）==getPageSize（）-1）{
80j++;
81}
82}
83
84loadTemplate（data[getCurrentPageNo（）-1]）;
85
86showPageNo（）;
87}
88};
89
90vargetData=function（path）{
91$.getJSON（path,function（data）{
92json=data;
93showData（）;
94}）;
95};
96
97varinitPageShow=function（）{
98setPageSize（5）;
99$（"#list_input_pagesize"）.val（getPageSize（））;
100varpath="/list/data/list.json";
101getData（path）;
102
103$（"#list_button_pagesize"）.bind（"click",function（）{
104varnewPageSize=parseInt（$（"#list_input_pagesize"）.val（））;
105setPageSize（newPageSize）;
106data=[];
107showData（）;
108$（"#list_input_pagesize"）.focus（）;
109returnfalse;
110}）;
111$（"#list_previous"）.live（"click",function（）{
112showPreviousPage（）;
113returnfalse;
114}）;
115$（"#list_next"）.live（"click",function（e）{
116showNextPage（）;
117returnfalse;
118}）;
119$（"#list_input_pagesize"）.focus（）;
120};
121
122initPageShow（）;
123}
124
125varinit=function（）{
126pageShow（）;
127}
128
129init（）;
5、程序中所有文件的存储结构如图1所示。
图1
6、程序运行结果如图2所示。
图2
综上所述，本文所介绍的翻页显示控制方法避免了前后台交互的问题，使前台程序可以独立运转，独立控制翻页，而无需依赖后台支持，使用过程较为灵活，用户响应时间很短，无需刷新页面和请求后台数据，具有很高的效率。
在使用过程中，可以将其中的翻页函数以jQuery函数调用方式予以应用。
copyright@ 2008-2022 冰豆网网站版权所有
经营许可证编号:鄂ICP备2022015515号-1
升级会员 