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

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

为渭滨等地区用户提供了全套网页设计制作服务，及渭滨网站建设行业解决方案。主营业务为成都做网站、成都网站制作、渭滨网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

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

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

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

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

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

#p#

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

 
 
 
 
    
  
  
  
  
  1. 代码 2：  
    2. 
  
  
  
  
  2. list.html  
    3. 
  
  
  
  
  3.  
    4. 
  
  
  
  
  4.  
    5. 
  
  
  
  
  5.  
    6. 
  
  
  
  
  6.    
    7. 
  
  
  
  
  7.     
    8. 
  
  
  
  
  8.    List 
    9. 
  
  
  
  
  9.      
    10. 
  
  
  
  
  10.      
    11. 
  
  
  
  
  11.      
    12. 
  
  
  
  
  12.    
    13. 
  
  
  
  
  13.  
    14. 
  
  
  
  
  14.    
    15. 
  
  
  
  
  15.     
    The List Page
     
    16. 
  
  
  
  
  16.      
    17. 
  
  
  
  
  17.       Items per Page:   
    18. 
  
  
  
  
  18.        
    19. 
  
  
  
  
  19.        
    20. 
  
  
  
  
  20.     
 
  •      
  •        
  •         
    •  
  •           
    •  
  •             Task 
  •             Time 
  •             Location 
  •           
    •  
  •         
    •  
  •         
    •  
  •         {for item in todo}  
  •           
    •  
  •             
    •  
  •             
    •  
  •             
    •  
  •           
    •  
  •         {/for}  
  •           
    •  
  •              
  •               previous 
  •                
  •               next 
  •              
  •           
    •  
  •         
    •  
  •       
    •
    ${item.task} ${item.time} ${item.location}
     
  •     
  •     
    •  
  •    
  •  
  •  
  •  

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

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

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

    #p#

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

     
    图1

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

     
    图2

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

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

    当前题目：基于JSON实现数据列表翻页显示
    路径分享：http://www.hantingmc.com/qtweb/news35/490935.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    网站制作知识

    分类信息网

    营销网站定位　　 　温岭熙道网站　　 　乐山电信机房　　 　做网站　　 　服务器托管　　 　四川德阳主机托管　　 　重庆网络营销　　 　红光高低压开关厂　　 　蜜朵婚庆　　 　网站建设　　 　域名注册　　 　古巴雪茄　　 　成都网站制作　　 　眉山服务器租用　　 　标志设计　　 　中国电信西部信息中心机房　　 　名片设计　　 　成都做网站　　 　电商网站建设　　 　成都托管服务器