I基于JSON实现数据列表翻页显示.docVIP

基于JSON实现数据列表翻页显示(1) 2010-08-18 09: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： list.json { todo: [ { task: Go to US, time: 2010-09-05, location: PA }, { task: Come back China, time: 2010-09-15, location: Beijing }, { task: Go to lab, time: 2010-09-20, location: Wuhan }, { task: Go to Shopping, time: 2010-09-25, location: Wuhan }, { task: Attend conference, time: 2010-09-30, location: Beijing }, { task: View TV, time: 2010-10-01, location: Wuhan }, { task: View SAKAI, time: 2010-10-02, location: Wuhan }, { task: View Movie, time: 2010-10-01, location: Wuhan }, { task: Review papers, time: 2010-10-03, location: Wuhan } ] }  2、编写前台显示代码，采用Trimpath模板编写列表数据的模板化显示部分，如代码 2所示。在这里，采用Trimpath模板来编写表格体（tbody）中的内容，采用名为list_container的div作为目标显示容器。 代码 2： list.html !DOC