基于JSON实现数据列表翻页显示-vue获取json数据并展示

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

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

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

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

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

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

代码 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所示），这是本方法的关键。需要用到jQuery的JSON处理功能和Trimpath模板加载功能，该方法的主要思路是：将所需显示的包含全部目标数据的JSON对象拆分成多个JSON对象，集中存入一个数组，数组中每个JSON对象对应包含一个页面需要显示的内容，然后根据用户对页码的选择，将与页码对应的那个JSON对象送到Trimpath模板加载，在页面上显示出来。

当用户在页面上点击“前一页”、“后一页”链接进行翻页控制的时候，就更换要加载的JSON数据对象，这样就可以在不刷新页面的情况下实现快速的翻页响应，由于是纯前台控制，不需请求后台，***的时间消耗只是重新加载一遍前台模板，因此速度很快。

该程序中采用了三个对象，分别是：

1）json: 类型为JSON对象，功能是用来存储初始获得的JSON对象，其中包含所有需要显示的数据；

2）data: 类型是数组，功能是用来存储经过了拆分处理的每一页需要显示的JSON对象的集合，如前所述；

3）info: 类型是JSON对象，功能是用来存储翻页显示过程中的控制信息（如：currentPageNo, pageSize等）。

另外，该程序还提供了页面尺寸修改的功能，可以供用户修改每一页显示的数据项数。

代码 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、程序中所有文件的存储结构如图1所示。

图1

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

图2

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

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

【编辑推荐】