自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

基于JSON實現(xiàn)數(shù)據(jù)列表翻頁顯示

作者：吳砥
開發(fā) 前端
本文要介紹的是一種采用純前臺方案，可以實現(xiàn)數(shù)據(jù)列表顯示過程的翻頁功能，其特點是以JSON, jQuery和Trimpath來實現(xiàn)前臺數(shù)據(jù)的列表顯示與翻頁控制，整個過程中不依賴后臺。

【51CTO獨家特稿】在Web開發(fā)過程中，我們常常要實現(xiàn)大量同結構數(shù)據(jù)在網(wǎng)頁上的列項/列表顯示，相當多的時間都花在數(shù)據(jù)顯示的處理上。而數(shù)據(jù)列表顯示過程中的翻頁功能，則是Web開發(fā)中非常常用的功能，有多種實現(xiàn)方法。

由于涉及到顯示頁面的數(shù)據(jù)更新問題，因此，多數(shù)實現(xiàn)方法往往用到前后臺交互功能，利用后臺邏輯控制功能來提供支持，完成前臺數(shù)據(jù)顯示的翻頁功能。這樣的處理方式，的確可以解決很多情況下的實際問題，然而代價是增加了前后臺交互的次數(shù)，每一次翻頁都要請求后臺邏輯控制程序和后臺數(shù)據(jù)庫，也增加了用戶等待時間。

本文要介紹的是一種采用純前臺方案，可以實現(xiàn)數(shù)據(jù)列表顯示過程的翻頁功能，其特點是以JSON, jQuery和Trimpath來實現(xiàn)前臺數(shù)據(jù)的列表顯示與翻頁控制，整個過程中不依賴后臺，不需要用到任何JSP, PHP, ASP或其他動態(tài)網(wǎng)頁代碼，屬于純前臺程序，在使用時，為用戶提供了很大的靈活性。

具體實現(xiàn)過程包括如下步驟：

1、將需要列表翻頁顯示的數(shù)據(jù)處理為JSON的格式，如代碼 1所示。為簡易起見，這里僅列出九條數(shù)據(jù)，實際上可以有更多條數(shù)據(jù)包含于JSON文件中，通過AJAX方式從后臺請求得到存有數(shù)據(jù)的JSON對象，或者也可以直接采用前臺jQuery加載JSON文件的方式得到。（相關文章推薦：理解jQuery解析JSON數(shù)據(jù)對象原理）

  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. } 

#p#

2、編寫前臺顯示代碼，采用Trimpath模板編寫列表數(shù)據(jù)的模板化顯示部分，如代碼 2所示。在這里，采用Trimpath模板來編寫表格體（tbody）中的內(nèi)容，采用名為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模板加載功能，該方法的主要思路是：將所需顯示的包含全部目標數(shù)據(jù)的JSON對象拆分成多個JSON對象，集中存入一個數(shù)組，數(shù)組中每個JSON對象對應包含一個頁面需要顯示的內(nèi)容，然后根據(jù)用戶對頁碼的選擇，將與頁碼對應的那個JSON對象送到Trimpath模板加載，在頁面上顯示出來。

當用戶在頁面上點擊“前一頁”、“后一頁”鏈接進行翻頁控制的時候，就更換要加載的JSON數(shù)據(jù)對象，這樣就可以在不刷新頁面的情況下實現(xiàn)快速的翻頁響應，由于是純前臺控制，不需請求后臺，***的時間消耗只是重新加載一遍前臺模板，因此速度很快。

該程序中采用了三個對象，分別是：

1）json: 類型為JSON對象，功能是用來存儲初始獲得的JSON對象，其中包含所有需要顯示的數(shù)據(jù)；

2）data: 類型是數(shù)組，功能是用來存儲經(jīng)過了拆分處理的每一頁需要顯示的JSON對象的集合，如前所述；

3）info: 類型是JSON對象，功能是用來存儲翻頁顯示過程中的控制信息（如：currentPageNo, pageSize等）。

另外，該程序還提供了頁面尺寸修改的功能，可以供用戶修改每一頁顯示的數(shù)據(jù)項數(shù)。

  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 = 0, j=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

綜上所述，本文所介紹的翻頁顯示控制方法避免了前后臺交互的問題，使前臺程序可以獨立運轉，獨立控制翻頁，而無需依賴后臺支持，使用過程較為靈活，用戶響應時間很短，無需刷新頁面和請求后臺數(shù)據(jù)，具有很高的效率。在使用過程中，可以將其中的翻頁函數(shù)以jQuery函數(shù)調(diào)用方式予以應用。

【本文是51CTO原創(chuàng)稿件，轉載請務必標明出處和作者】

【編輯推薦】

  1. 51CTO專訪人人網(wǎng)黃晶：WEB開發(fā)需要隨需應變
  2. 理解jQuery解析JSON數(shù)據(jù)對象原理
  3. ASP.NET前臺控件點評：避免強迫癥，奔向簡潔高效
  4. 提高程序執(zhí)行效率 Web開發(fā)技巧大串燒
  5. Web開發(fā)者必備的十大網(wǎng)站資源
責任編輯：王曉東 來源： 51CTO.com
jQueryJSONTrimpath
相關推薦

2023-06-05 15:00:13

書籍翻頁動效鴻蒙

2014-12-16 11:03:46

大數(shù)據(jù)

2009-06-30 09:16:45

數(shù)據(jù)庫存儲JSP文件

2009-09-08 14:21:38

CheckBox翻頁選

2009-07-03 14:23:49

JSP數(shù)據(jù)分頁

2009-12-24 14:08:25

WPF數(shù)據(jù)模板

2009-03-23 09:01:00

圖片存儲數(shù)據(jù)庫JSP

2015-05-28 10:20:34

js相冊翻頁

2021-04-13 08:12:33

拉鏈式Map探測式

2009-10-14 17:32:24

VB.NET實現(xiàn)下拉列

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 數(shù)據(jù)保護

2016-09-19 13:44:54

vue翻頁組件Web

2021-08-03 15:25:09

數(shù)據(jù)庫Sharding SpSQL

2025-04-15 08:40:00

數(shù)據(jù)庫悲觀鎖樂觀鎖

2024-11-15 06:00:00

Python列表字典

2009-12-18 16:27:41

Ruby解析Json

2009-06-15 16:29:42

JSONAJAX
點贊
收藏

51CTO技術棧公眾號