如何在DataTables中創建動態列生成？

我有以下漂亮的jQuery插件連接問題稱爲數據表。如何在DataTables中創建動態列生成？

我需要的東西是從JSON獲得表，我做到了，但它是靜態的（我的意思是我在代碼中每列名等寫）喜歡這裏：

<table id="example"> 
    <thead> 
    <tr> 
    <th class="site_name">COLUMN1</th> 
    <th>COLUMN2</th> 
    <th>COLUMN3</th> 
    <th>COLUMN4</th 
    </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table>

$(document).ready(function() { 
var oTable = $('#example').dataTable({ 
    "bProcessing": true, 

    "sAjaxSource": "http://localhost/tables/myjson.json", 
    "bDeferRender": true, 
    "aoColumns": [ 
     { "mData": "COLUMN1" }, 
     { "mData": "COLUMN2" }, 
     { "mData": "COLUMN3" }, 
     { "mData": "COLUMN4" } 
    ] 
}); 
});

而且有我的JSON文件：

{"aaData": 
[{"COLUMN1":"VAL1", 
"COLUMN2":"VAL2", 
"COLUMN3:"VAL3", 
"COLUMN4":"VAL4"}]}

，我想達到的目標是生成列名動態（自J讀SON）並將這些列名放在th標籤和「aoColums」之間。例如，如果我將與列和不同勢列指出錯誤計數得到Json的名字，現在應該生成表像即時生成。

在此先感謝！

來源

2014-03-27 user3114157

有你檢查嗎？ http://datatables.net/blog/Extended_data_source_options_with_DataTables –

我檢查。在這種情況下，什麼都不感興趣 – user3114157

這是我自己做了一個解決方案。它可以運行。

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"> 
</head> 
<body> 
<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.0.min.js'></script> 
<table id="example"> 
    <thead id="test"> 
     <tr id="myclass"> 
      <script> 
//*************************************************************************************************************************************   

       var link='http://localhost/myjson.json' 
       var tab = []; 
//**************************************************************************************************************************************** 

//**************************************************************************************************************************************** 
//*******************[GETTING WHOLE VALUES FROM JSON]************************************************************************************* 
//**************************************************************************************************************************************** 
      $.ajax({ 
       url: link, 
       success: function(data) { 
        window.save = "window.jsonread = "+data; 
        eval(window.save); 
        var jObj = (window.jsonread.aaData[0]); 
        var i = 0; 
        for (var key in jObj) { 
         tab[i] = key; 
         i++; 
        } 
//****************************************************************************************************************************************     
//*********************[RECORD GENERATION]************************************************************************************************ 
//**************************************************************************************************************************************** 
        $(document).ready(function() { 
         var columns = []; 
         for (var k=0;k<tab.length;k++){ 
          columns[k]={"mData":tab[k]}; 
         } 
         var oTable = $('#example').dataTable({ 
          "bProcessing": true, 
          "sAjaxSource": link, 
          "bDeferRender": true, 
          "aoColumns": columns 
         }); 
        }); 
//****************************************************************************************************************************************   
//************************[TABLE HEADERS ADDIDTION]*************************************************************************************** 
//**************************************************************************************************************************************** 
        i=0; 
        $("#example").find("thead").find("th").each(function(){ 
         $(this).text(tab[i]); 
         i++; 
        }) 
//****************************************************************************************************************************************     
       } 
      }) 
      </script> 
     </tr> 
    </thead> 
    <tbody> 
    </tbody> 
</table> 


    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script> 
    <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script> 

</body> 
</html>

來源

2014-03-27 13:35:40 user3114157

如何在DataTables中創建動態列生成？

回答

相關問題