《基于json实现数据列表翻页显示》由会员上传分享，免费在线阅读，更多相关内容在工程资料-天天文库。

1、基于JSON实现数据列表翻页显示(1)http://developer.51cto.com2010-08-1809:03吴砥51CTO.com我要评论(2)本文要介绍的是一种采用纯前台方案，可以实现数据列表显示过程的翻页功能，其特点是以JSON,jQuery和Trimpath来实现前台数据的列表显示与翻页控制，整个过程中不依赖后台。【51CTO独家特稿】在Web开发过程中，我们常常要实现大量同结构数据在网页上的列项/列表显示，相当多的时间都花在数据显示的处理上。而数据列表显示过程中的翻页功能，则是Web开发中非常常用的功能，有多种实现方法。

2、由于涉及到显示页面的数据更新问题，因此，多数实现方法往往用到前后台交互功能，利用后台逻辑控制功能来提供支持，完成前台数据显示的翻页功能。这样的处理方式，的确可以解决很多情况下的实际问题，然而代价是增加了前后台交互的次数，每一次翻页都要请求后台逻辑控制程序和后台数据库，也增加了用户等待时间。本文要介绍的是一种采用纯前台方案，可以实现数据列表显示过程的翻页功能，其特点是以JSON,jQuery和Trimpath来实现前台数据的列表显示与翻页控制，整个过程中不依赖后台，不需要用到任何JSP,PHP,ASP或其他动态网页代码，属于纯前台程序，在使用

3、时，为用户提供了很大的灵活性。具体实现过程包括如下步骤：1、将需要列表翻页显示的数据处理为JSON的格式，如代码1所示。为简易起见，这里仅列出九条数据，实际上可以有更多条数据包含于JSON文件中，通过AJAX方式从后台请求得到存有数据的JSON对象，或者也可以直接采用前台jQuery加载JSON文件的方式得到。（相关文章推荐：理解jQuery解析JSON数据对象原理）1代码1：2list.json34{5"todo":[6{7"task":"GotoUS",8"time":"2010-09-05",9"location":"PA"10},1

4、1{12"task":"ComebackChina",13"time":"2010-09-15",1"location":"Beijing"2},3{4"task":"Gotolab",5"time":"2010-09-20",6"location":"Wuhan"7},8{9"task":"GotoShopping",10"time":"2010-09-25",11"location":"Wuhan"12},13{14"task":"Attendconference",15"time":"2010-09-30",16"location":

5、"Beijing"17},18{19"task":"ViewTV",20"time":"2010-10-01",21"location":"Wuhan"22},23{24"task":"ViewSAKAI",25"time":"2010-10-02",26"location":"Wuhan"27},28{29"task":"ViewMovie",30"time":"2010-10-01",31"location":"Wuhan"32},33{34"task":"Reviewpapers",35"time":"2010-10-03",36"l

6、ocation":"Wuhan"37}38]1}2、编写前台显示代码，采用Trimpath模板编写列表数据的模板化显示部分，如代码2所示。在这里，采用Trimpath模板来编写表格体（tbody）中的内容，采用名为list_container的div作为目标显示容器。1代码2：2list.html34567

7、t-Type"content="text/html;charset=utf-8">89101112131415

TheListPage