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

作者：吳砥 2010-08-18 09:03:46

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

【51CTO獨家特稿】在Web開發(fā)過程中，我們常常要實現(xiàn)大量同結(jié)構(gòu)數(shù)據(jù)在網(wǎng)頁上的列項/列表顯示，相當(dā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文件的方式得到。（相關(guān)文章推薦：理解jQuery解析JSON數(shù)據(jù)對象原理）

代碼 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"  
        }  
    ]  
}

#p#

2、編寫前臺顯示代碼，采用Trimpath模板編寫列表數(shù)據(jù)的模板化顯示部分，如代碼 2所示。在這里，采用Trimpath模板來編寫表格體（tbody）中的內(nèi)容，采用名為list_container的div作為目標(biāo)顯示容器。

代碼 2：  
list.html  
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
 
  <head> 
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
   <title>List</title> 
    <script type="text/javascript" src="/list/javascript/lib/jquery-1.4.2.js"></script> 
    <script type="text/javascript" src="/list/javascript/lib/template.js"></script> 
    <link rel="stylesheet" type="text/css" href="/list/css/list.css" /> 
  </head> 
 
  <body> 
    <h1>The List Page</h1> 
    <div id="list_input_pagesize_container"> 
      Items per Page:   
      <input id="list_input_pagesize" type="text" /> 
      <input id="list_button_pagesize" type="button" value="OK" /> 
    </div> 
    <textarea id="list_template" style="display: none;"> 
      <table> 
        <thead> 
          <tr> 
            <td id="list_td_task">Task</td> 
            <td id="list_td_time">Time</td> 
            <td id="list_td_location">Location</td> 
          </tr> 
        </thead> 
        <tbody> 
        {for item in todo}  
          <tr> 
            <td>${item.task}</td> 
            <td>${item.time}</td> 
            <td>${item.location}</td> 
          </tr> 
        {/for}  
          <tr> 
            <td colspan="3" id="list_td_foot"> 
              <a id="list_previous" href="">previous</a> 
              <span id="list_pageno"></span> 
              <a id="list_next" href="">next</a> 
            </td> 
          </tr> 
        </tbody> 
      </table> 
   </textarea> 
    <div id="list_container" style="display: none;"></div> 
  </body> 
 
</html> 
<script type="text/javascript" src="/list/javascript/list.js"></script>

3、采用CSS樣式，對顯示頁面予以修飾，如代碼 3所示。

代碼 3：  
list.css  
form {margin: 10px 0;}  
table {border-width: 1px; border-style: solid; width: 600px;}  
td {border-width: 1px; border-style: solid; padding: 3px 5px;}  
thead {font-weight: bold; background-color: #F0F0F0;}  
 
#list_input_pagesize_container {margin: 10px 0;}  
#list_input_pagesize {width: 50px;}  
#list_next {float: right;}  
#list_previous {float: left;}  
#list_td_foot {text-align: center;}  
#list_td_task {width: 50%}  
#list_td_time {width: 20%}  
#list_td_location {width: 30%}

#p#

4、采用jQuery來控制前臺翻頁顯示（如代碼 4所示），這是本方法的關(guān)鍵。需要用到j(luò)Query的JSON處理功能和Trimpath模板加載功能，該方法的主要思路是：將所需顯示的包含全部目標(biāo)數(shù)據(jù)的JSON對象拆分成多個JSON對象，集中存入一個數(shù)組，數(shù)組中每個JSON對象對應(yīng)包含一個頁面需要顯示的內(nèi)容，然后根據(jù)用戶對頁碼的選擇，將與頁碼對應(yīng)的那個JSON對象送到Trimpath模板加載，在頁面上顯示出來。

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

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

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

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

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

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

代碼 4：  
list.js  
var pageShow = function() {  
  var json = {}; // The original json object  
  var data = []; // The array of all page list, includes each page items  
  var info = {}; // The json object to save page information  
 
  var getPageSize = function() {return info.pageSize;};  
  var setPageSize = function(pageSize) {info.pageSize = pageSize;};  
  var getItemNumber = function() {return info.itemNumber;};  
  var setItemNumber = function(itemNumber) {info.itemNumber = itemNumber;};  
  var getPageNumber = function() {return info.pageNumber;};  
  var setPageNumber = function(pageNumber) {info.pageNumber = pageNumber;};  
  var getCurrentPageNo = function() {return info.currentPageNo;};  
  var setCurrentPageNo = function(currentPageNo) {info.currentPageNo = currentPageNo;};  
 
 var loadTemplate = function(json) {  
    $("#list_container").hide();  
    $("#list_container").html(TrimPath.processDOMTemplate("list_template", json));  
    $("#list_container").show();  
  };  
 
  var showPageNo = function() {  
    $("#list_pageno").text(getCurrentPageNo() + "/" + getPageNumber());  
  };  
 
  var showPreviousPage = function() {  
    var currentPageNo = getCurrentPageNo();  
    var pageNumber = getPageNumber();  
    if (currentPageNo != 1) {  
      currentPageNo--;  
      setCurrentPageNo(currentPageNo);  
      loadTemplate(data[currentPageNo - 1]);  
      showPageNo();  
    }  
  };  
 
  var showNextPage = function() {  
    var currentPageNo = getCurrentPageNo();  
    var pageNumber = getPageNumber();  
    if (currentPageNo != pageNumber) {  
      currentPageNo++;  
      setCurrentPageNo(currentPageNo);  
      loadTemplate(data[currentPageNo - 1]);  
      showPageNo();  
    }  
  };  
 
  var showData = function() {  
    var pageSize = getPageSize();  
    setPageSize(pageSize);  
 
    var itemNumber = json.todo.length;  
    setItemNumber(itemNumber);  
 
    var pageNumber = 0;  
    if (itemNumber % pageSize == 0) {  
      var pageNumber = itemNumber / pageSize;  
    }  
    else {  
      pageNumber = Math.floor(itemNumber / pageSize) + 1;  
    }  
    setPageNumber(pageNumber);  
 
    var currentPageNo = 1;  
    setCurrentPageNo(currentPageNo);  
 
    // Validate if there is only one page  
    if (pageNumber == 1) {  
      loadTemplate(json);  
      showPageNo();  
    }  
    else {  
      for (var i = 0, j=0; i < itemNumber; i++) {  
        if (!data[j]) {  
          data[j] = $.parseJSON('{"todo": []}');  
        }  
        data[j].todo[i] = json.todo[i];  
        if (i % getPageSize() == getPageSize() - 1) {  
          j++;  
        }  
      }  
 
      loadTemplate(data[getCurrentPageNo() - 1]);  
 
 showPageNo();  
    }  
  };  
 
  var getData = function(path) {  
    $.getJSON(path, function(data) {  
      json = data;  
      showData();  
    });  
  };  
 
  var initPageShow = function() {  
    setPageSize(5);  
    $("#list_input_pagesize").val(getPageSize());  
    var path = "/list/data/list.json";  
    getData(path);  
 
    $("#list_button_pagesize").bind("click", function() {  
      var newPageSize = parseInt($("#list_input_pagesize").val());  
      setPageSize(newPageSize);  
      data = [];  
      showData();  
      $("#list_input_pagesize").focus();  
      return false;  
    });  
    $("#list_previous").live("click", function() {  
      showPreviousPage();  
      return false;  
    });  
    $("#list_next").live("click", function(e) {  
      showNextPage();  
      return false;  
    });  
    $("#list_input_pagesize").focus();  
  };  
 
  initPageShow();  
}  
 
var init = function() {  
  pageShow();  
}  
 
init();

#p#

5、程序中所有文件的存儲結(jié)構(gòu)如圖1所示。

圖1

6、程序運(yùn)行結(jié)果如圖2所示。

圖2

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

【本文是51CTO原創(chuàng)稿件，轉(zhuǎn)載請務(wù)必標(biāo)明出處和作者】

【編輯推薦】

51CTO專訪人人網(wǎng)黃晶：WEB開發(fā)需要隨需應(yīng)變
理解jQuery解析JSON數(shù)據(jù)對象原理
ASP.NET前臺控件點評：避免強(qiáng)迫癥，奔向簡潔高效
提高程序執(zhí)行效率 Web開發(fā)技巧大串燒
Web開發(fā)者必備的十大網(wǎng)站資源

責(zé)任編輯：王曉東來源： 51CTO.com