將JSOn數據渲染進頁面表格（一）

實現：將后台JSOn數據在頁面以表格顯示最后n條，折疊前面的內容。

除了處理JSOn數據比較麻煩，原理還是DOM操作，所以原生基礎很重要啊。這種情況是在頁面寫好表頭，然后再插入行，篩選。

JSOn數據格式,差不多這個格式吧，隨便寫的

[
   {“version”:“1.2.1”,
     "333":"44",
     "fruit":[
              {"apple":"one"},
              {"banana":"two"},
              {"grap":"three"},
              {"orange":"four"}
      ]
  }  ,
  {“version”:“1.2.3”,
     "333":"44",
     "fruit":[
              {"apple":"one"},
              {"banana":"two"},
              {"grap":"three"},
              {"orange":"four"}
      ]
  }  

]    

html部分

<div class="datalist">
                        <table class="table" id="dataList">
                            <colgroup>
                                <col width="5">
                                <col width="10%"/>
                                <col width="40%">
                                <col width="40%"/>
                            </colgroup>
                            <tr id="thead">
                                <th><input type="checkbox"></th>
                                 <th>NO</th>
                                 <th>KeyName</th>
                                 <th>Imformation</th>
                            </tr>
                            <tr id="open">
                                <td>...</td>
                                <td>...</td>
                                <td>...</td>
                                <td>...</td>
                            </tr> 
                        </table>
                    </div>

js部分

$(function(){

    var getData = function(){            
        $.get("data.json").success(function(data) {
            tempData = data;
            generatingTable(data);
        });
    };

    
    var generatingTable = function(data){
        var trStr = "<tr ><td><input type='checkbox'></td><td class='number'>{number}</td><td>{keyname}</td><td class='infomation'>{values}</td></tr>";
        var count=0;
        var n=6;
        var L = data.length;
        var str = "";
　　　　　//顯示最后N條
        if((L<=n)==true){
            for(var i=0;i<L;i++){
                str=trStr.replace("{number}",i+1);
                str=str.replace("{keyname}",data[i].key);
                str=str.replace("{values}",data[i].version);
                $("#dataList").append(str);
            }
            $("#open").hide();
        }
        else{
            for (var i = L-n; i<L;i++) {
                str=trStr.replace("{number}",i+1);
                str=str.replace("{keyname}",data[i].key);
                str=str.replace("{values}",data[i].version);
                $("#dataList").append(str);
            };    
        }
        //查看全部數據
        $("#checkAll").click(function(){
            if($(this).attr('data-flag')=='false'){
                if((L<=n)==true){
                    return;
                }        
                for(var i=0;i< L-n;i++){
                    str=trStr.replace("{number}",i+1);
                    str=str.replace("{keyname}",data[i].key);
                    str=str.replace("{values}",data[i].cloudosclient_version);
                    $("#open").before(str);    
                }
                $("#open").hide();
                $(this).text('部分顯示');
                $(this).attr('data-flag',true);            
            }else if($(this).attr('data-flag')=='true'){
                $('#thead').nextUntil('#open').remove();
                $("#open").show();
                $(this).text('顯示全部');
                $(this).attr('data-flag',false);    
            }
        });
    };

    getData();
});