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

基于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 代码 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 52 2、编写前台显示代码，采用Trimpath模板编写列表数据的模板化显示部分，如代码 2所示。在这里，采用Trimpath模板来编写表格体（tbody）中的内容，采用名为list_container的div作为目标显示容器。1 代码 2： 2 list.html 3 4 5 6 7 8 List 9 10 11 12 13 14 15 The List Page 16 17 Items per Page: 18 19 20 21 22 23 24 25 Task 26 Time 27 Location 28 29 30 31 for item in todo 32 33 $item.task 34 $item.time 35 $item.location 36 37 /for 38 39 40 previous 41 42 next 43 44 45 46 47 48 49 50 51 52 3、采用CSS样式，对显示页面予以修饰，如代码 3所示。53 代码 3： 54 list.css 55 form margin: 10px 0; 56 table border-width: 1px; border-style: solid; width: 600px; 57 td border-width: 1px; border-style: solid; padding: 3px 5px; 58 thead font-weight: bold; background-color: #F0F0F0; 59 60 #list_input_pagesize_container margin: 10px 0; 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： 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(datacurrentPageNo - 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(datacurrentPageNo - 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 = 0, j=0; i itemNumber; i+) 75 if (!dataj) 76 dataj = $.parseJSON(todo: ); 77 78 dataj.todoi = json.todoi; 79 if (i % getPageSize() = getPageSize() - 1) 80 j+; 81 82 83 84 loadTemplate(datagetCurrentPageNo() - 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(); 5、程序中所有文件的存储结构如图1所示。 图16、程序运行结果如图2所示。 图2综上所述，本文所介绍的翻页显示控制方法避免了前后台交互的问题，使前台程序可以独立运转，独立控制翻页，而无需依赖后台支持，使用过程较为灵活，用户响应时间很短，无需刷新页面和请求后台数据，具有很高的效率。在使用过程中，可以将其中的翻页函数以jQuery函数调用方式予以应用。10 / 10文档可自由编辑打印