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

开发 前端
本文要介绍的是一种采用纯前台方案,可以实现数据列表显示过程的翻页功能,其特点是以JSON, jQuery和Trimpath来实现前台数据的列表显示与翻页控制,整个过程中不依赖后台。

【51CTO独家特稿】在Web开发过程中,我们常常要实现大量同结构数据在网页上的列项/列表显示,相当多的时间都花在数据显示的处理上。而数据列表显示过程中的翻页功能,则是Web开发中非常常用的功能,有多种实现方法。

由于涉及到显示页面的数据更新问题,因此,多数实现方法往往用到前后台交互功能,利用后台逻辑控制功能来提供支持,完成前台数据显示的翻页功能。这样的处理方式,的确可以解决很多情况下的实际问题,然而代价是增加了前后台交互的次数,每一次翻页都要请求后台逻辑控制程序和后台数据库,也增加了用户等待时间。

本文要介绍的是一种采用纯前台方案,可以实现数据列表显示过程的翻页功能,其特点是以JSON, jQuery和Trimpath来实现前台数据的列表显示与翻页控制,整个过程中不依赖后台,不需要用到任何JSP, PHP, ASP或其他动态网页代码,属于纯前台程序,在使用时,为用户提供了很大的灵活性。

具体实现过程包括如下步骤:

1、将需要列表翻页显示的数据处理为JSON的格式,如代码 1所示。为简易起见,这里仅列出九条数据,实际上可以有更多条数据包含于JSON文件中,通过AJAX方式从后台请求得到存有数据的JSON对象,或者也可以直接采用前台jQuery加载JSON文件的方式得到。(相关文章推荐:理解jQuery解析JSON数据对象原理

  1. 代码 1:  
  2. list.json  
  3.  
  4. {  
  5.     "todo": [  
  6.         {  
  7.             "task": "Go to US",  
  8.             "time": "2010-09-05",  
  9.             "location": "PA"  
  10.         },  
  11.         {  
  12.             "task": "Come back China",  
  13.             "time": "2010-09-15",  
  14.             "location": "Beijing"   
  15.         },  
  16.         {  
  17.             "task": "Go to lab",  
  18.             "time": "2010-09-20",  
  19.             "location": "Wuhan"   
  20.         },  
  21.         {  
  22.             "task": "Go to Shopping",  
  23.             "time": "2010-09-25",  
  24.             "location": "Wuhan"  
  25.         },  
  26.         {  
  27.             "task": "Attend conference",  
  28.             "time": "2010-09-30",  
  29.             "location": "Beijing"  
  30.         },  
  31.         {  
  32.             "task": "View TV",  
  33.             "time": "2010-10-01",  
  34.             "location": "Wuhan"  
  35.         },  
  36.         {  
  37.             "task": "View SAKAI",  
  38.             "time": "2010-10-02",  
  39.           "location": "Wuhan"  
  40.         },  
  41.         {  
  42.             "task": "View Movie",  
  43.             "time": "2010-10-01",  
  44.             "location": "Wuhan"  
  45.         },  
  46.         {  
  47.             "task": "Review papers",  
  48.             "time": "2010-10-03",  
  49.             "location": "Wuhan"  
  50.         }  
  51.     ]  

#p#

2、编写前台显示代码,采用Trimpath模板编写列表数据的模板化显示部分,如代码 2所示。在这里,采用Trimpath模板来编写表格体(tbody)中的内容,采用名为list_container的div作为目标显示容器。

  1. 代码 2:  
  2. list.html  
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
  4. <html> 
  5.  
  6.   <head> 
  7.    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  8.    <title>List</title> 
  9.     <script type="text/javascript" src="/list/javascript/lib/jquery-1.4.2.js"></script> 
  10.     <script type="text/javascript" src="/list/javascript/lib/template.js"></script> 
  11.     <link rel="stylesheet" type="text/css" href="/list/css/list.css" /> 
  12.   </head> 
  13.  
  14.   <body> 
  15.     <h1>The List Page</h1> 
  16.     <div id="list_input_pagesize_container"> 
  17.       Items per Page:   
  18.       <input id="list_input_pagesize" type="text" /> 
  19.       <input id="list_button_pagesize" type="button" value="OK" /> 
  20.     </div> 
  21.     <textarea id="list_template" style="display: none;"> 
  22.       <table> 
  23.         <thead> 
  24.           <tr> 
  25.             <td id="list_td_task">Task</td> 
  26.             <td id="list_td_time">Time</td> 
  27.             <td id="list_td_location">Location</td> 
  28.           </tr> 
  29.         </thead> 
  30.         <tbody> 
  31.         {for item in todo}  
  32.           <tr> 
  33.             <td>${item.task}</td> 
  34.             <td>${item.time}</td> 
  35.             <td>${item.location}</td> 
  36.           </tr> 
  37.         {/for}  
  38.           <tr> 
  39.             <td colspan="3" id="list_td_foot"> 
  40.               <a id="list_previous" href="">previous</a> 
  41.               <span id="list_pageno"></span> 
  42.               <a id="list_next" href="">next</a> 
  43.             </td> 
  44.           </tr> 
  45.         </tbody> 
  46.       </table> 
  47.    </textarea> 
  48.     <div id="list_container" style="display: none;"></div> 
  49.   </body> 
  50.  
  51. </html> 
  52. <script type="text/javascript" src="/list/javascript/list.js"></script> 

3、采用CSS样式,对显示页面予以修饰,如代码 3所示。

  1. 代码 3:  
  2. list.css  
  3. form {margin: 10px 0;}  
  4. table {border-width: 1px; border-style: solid; width: 600px;}  
  5. td {border-width: 1px; border-style: solid; padding: 3px 5px;}  
  6. thead {font-weight: bold; background-color: #F0F0F0;}  
  7.  
  8. #list_input_pagesize_container {margin: 10px 0;}  
  9. #list_input_pagesize {width: 50px;}  
  10. #list_next {float: right;}  
  11. #list_previous {float: left;}  
  12. #list_td_foot {text-align: center;}  
  13. #list_td_task {width: 50%}  
  14. #list_td_time {width: 20%}  
  15. #list_td_location {width: 30%} 

#p#

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:  
  2. list.js  
  3. var pageShow = function() {  
  4.   var json = {}; // The original json object  
  5.   var data = []; // The array of all page list, includes each page items  
  6.   var info = {}; // The json object to save page information  
  7.  
  8.   var getPageSize = function() {return info.pageSize;};  
  9.   var setPageSize = function(pageSize) {info.pageSize = pageSize;};  
  10.   var getItemNumber = function() {return info.itemNumber;};  
  11.   var setItemNumber = function(itemNumber) {info.itemNumber = itemNumber;};  
  12.   var getPageNumber = function() {return info.pageNumber;};  
  13.   var setPageNumber = function(pageNumber) {info.pageNumber = pageNumber;};  
  14.   var getCurrentPageNo = function() {return info.currentPageNo;};  
  15.   var setCurrentPageNo = function(currentPageNo) {info.currentPageNo = currentPageNo;};  
  16.  
  17.  var loadTemplate = function(json) {  
  18.     $("#list_container").hide();  
  19.     $("#list_container").html(TrimPath.processDOMTemplate("list_template", json));  
  20.     $("#list_container").show();  
  21.   };  
  22.  
  23.   var showPageNo = function() {  
  24.     $("#list_pageno").text(getCurrentPageNo() + "/" + getPageNumber());  
  25.   };  
  26.  
  27.   var showPreviousPage = function() {  
  28.     var currentPageNo = getCurrentPageNo();  
  29.     var pageNumber = getPageNumber();  
  30.     if (currentPageNo != 1) {  
  31.       currentPageNo--;  
  32.       setCurrentPageNo(currentPageNo);  
  33.       loadTemplate(data[currentPageNo - 1]);  
  34.       showPageNo();  
  35.     }  
  36.   };  
  37.  
  38.   var showNextPage = function() {  
  39.     var currentPageNo = getCurrentPageNo();  
  40.     var pageNumber = getPageNumber();  
  41.     if (currentPageNo != pageNumber) {  
  42.       currentPageNo++;  
  43.       setCurrentPageNo(currentPageNo);  
  44.       loadTemplate(data[currentPageNo - 1]);  
  45.       showPageNo();  
  46.     }  
  47.   };  
  48.  
  49.   var showData = function() {  
  50.     var pageSize = getPageSize();  
  51.     setPageSize(pageSize);  
  52.  
  53.     var itemNumber = json.todo.length;  
  54.     setItemNumber(itemNumber);  
  55.  
  56.     var pageNumber = 0;  
  57.     if (itemNumber % pageSize == 0) {  
  58.       var pageNumber = itemNumber / pageSize;  
  59.     }  
  60.     else {  
  61.       pageNumber = Math.floor(itemNumber / pageSize) + 1;  
  62.     }  
  63.     setPageNumber(pageNumber);  
  64.  
  65.     var currentPageNo = 1;  
  66.     setCurrentPageNo(currentPageNo);  
  67.  
  68.     // Validate if there is only one page  
  69.     if (pageNumber == 1) {  
  70.       loadTemplate(json);  
  71.       showPageNo();  
  72.     }  
  73.     else {  
  74.       for (var i = 0j=0; i < itemNumber; i++) {  
  75.         if (!data[j]) {  
  76.           data[j] = $.parseJSON('{"todo": []}');  
  77.         }  
  78.         data[j].todo[i] = json.todo[i];  
  79.         if (i % getPageSize() == getPageSize() - 1) {  
  80.           j++;  
  81.         }  
  82.       }  
  83.  
  84.       loadTemplate(data[getCurrentPageNo() - 1]);  
  85.  
  86.  showPageNo();  
  87.     }  
  88.   };  
  89.  
  90.   var getData = function(path) {  
  91.     $.getJSON(path, function(data) {  
  92.       json = data;  
  93.       showData();  
  94.     });  
  95.   };  
  96.  
  97.   var initPageShow = function() {  
  98.     setPageSize(5);  
  99.     $("#list_input_pagesize").val(getPageSize());  
  100.     var path = "/list/data/list.json";  
  101.     getData(path);  
  102.  
  103.     $("#list_button_pagesize").bind("click", function() {  
  104.       var newPageSize = parseInt($("#list_input_pagesize").val());  
  105.       setPageSize(newPageSize);  
  106.       data = [];  
  107.       showData();  
  108.       $("#list_input_pagesize").focus();  
  109.       return false;  
  110.     });  
  111.     $("#list_previous").live("click", function() {  
  112.       showPreviousPage();  
  113.       return false;  
  114.     });  
  115.     $("#list_next").live("click", function(e) {  
  116.       showNextPage();  
  117.       return false;  
  118.     });  
  119.     $("#list_input_pagesize").focus();  
  120.   };  
  121.  
  122.   initPageShow();  
  123. }  
  124.  
  125. var init = function() {  
  126.   pageShow();  
  127. }  
  128.  
  129. init(); 

#p#

5、程序中所有文件的存储结构如图1所示。

图1 
图1

6、程序运行结果如图2所示。

图2 
图2

综上所述,本文所介绍的翻页显示控制方法避免了前后台交互的问题,使前台程序可以独立运转,独立控制翻页,而无需依赖后台支持,使用过程较为灵活,用户响应时间很短,无需刷新页面和请求后台数据,具有很高的效率。在使用过程中,可以将其中的翻页函数以jQuery函数调用方式予以应用。

【本文是51CTO原创稿件,转载请务必标明出处和作者】

【编辑推荐】

  1. 51CTO专访人人网黄晶:WEB开发需要随需应变
  2. 理解jQuery解析JSON数据对象原理
  3. ASP.NET前台控件点评:避免强迫症,奔向简洁高效
  4. 提高程序执行效率 Web开发技巧大串烧
  5. Web开发者必备的十大网站资源
责任编辑:王晓东 来源: 51CTO.com
相关推荐

2023-06-05 15:00:13

书籍翻页动效鸿蒙

2014-12-16 11:03:46

大数据

2009-06-30 09:16:45

数据库存储JSP文件

2009-09-08 14:21:38

CheckBox翻页选

2009-07-03 14:23:49

JSP数据分页

2009-12-24 14:08:25

WPF数据模板

2015-05-28 10:20:34

js相册翻页

2009-03-23 09:01:00

图片存储数据库JSP

2009-10-14 17:32:24

VB.NET实现下拉列

2021-04-13 08:12:33

拉链式Map探测式

2009-09-11 11:58:00

C# ListBox多

2012-08-09 11:20:40

Swing

2017-04-28 09:18:39

webpackWeb搭建

2021-09-16 10:11:15

Dataphin 数据保护

2016-09-19 13:44:54

vue翻页组件Web

2021-08-03 15:25:09

数据库Sharding SpSQL

2009-12-18 16:27:41

Ruby解析Json

2022-07-20 15:32:25

时钟翻页Text组件

2009-06-15 16:29:42

JSONAJAX

2010-01-06 10:27:32

JSON数组
点赞
收藏

51CTO技术栈公众号