2011-08-15 41 views
0
<table cellpadding="0" cellspacing="0" border="1" class="display" id="FormsData" style="margin-bottom:5px;"> 
    <thead> 
     <tr id="thFormsData"> 

     </tr> 
     <tr> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td class="dataTables_empty"> 
       Loading data ... 
      </td> 
     </tr> 
    </tbody>   
</table> 

上面是jQuery數據表的表結構。我正在使用下面的代碼來填充它。jQuery datatable在它初始化之前添加th

$(document).ready(function() { 
    $('#FormsData').dataTable({ 
     "sDom": 'T<"clear">lfrtip', 
     "bProcessing": true, 
     "bServerSide": true, 
     "sAjaxSource": "GetJsonData.aspx?FormKey=" + getQuerystring("FormKey", "") + "&FormData=Get" 
)} 
)} 

現在的問題是,這種方式我有表結構來定義這jQuery的確定年代使用的列。但在我的情況下,我想要在初始化之前動態地將th附加到表中。

我想追加th基於json的數據,我從獲取GetJsonData.aspx文件。其定義在「sAjaxSource」:「GetJsonData.aspx ...」

回答

1

有從JS數組http://www.datatables.net/examples/data_sources/js_array.html

在這裏,你只需要更換的靜態數據與web服務返回的數據動態加載的一個很好的例子。

var url = "GetJsonData.aspx?FormKey=" + getQuerystring("FormKey", "") + "&FormData=Get"; 

$.getJSON(url, function(data) { 
    //test response and manipulate structure if necissary 

    $('#example').dataTable({ 
     "aaData":data, 
     "aoColumns": [ 
      { "sTitle": "Engine" }, 
      { "sTitle": "Browser" } // etc... 
     ] 
    }); 
}); 

aoColumns也將允許你動態渲染列。

+0

這實際上並不是我想要的,但是您的解決方案給了我一個主意,我的問題得到解決。感謝user827431。 – Priyank

+0

認爲可能是這種情況:) – martin

0

看過fnHeaderCallback函數嗎?

This function is called on every 'draw' event, and allows you to dynamically modify the header row. 
This can be used to calculate and display useful information about the table. 

"fnHeaderCallback": function(nHead, aasData, iStart, iEnd, aiDisplay) 

編輯:

所以你的問題是,你要創建取決於你通過AJAX,但還是做初始化前的數據的次?然後,你不能像在代碼中那樣獲取初始化數據。我建議使用user827431答案。

+0

我沒有th在''。我想添加totaly新的th。我不想修改它。我怎樣才能做到這一點?? – Priyank

+0

user827431對我來說是後期工作。問題解決了 – Priyank