Question

<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数据表的表结构。我正在使用下面的代码来填充它。

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

现在的问题是，我必须在表结构中定义 th ，jQuery数据用作列。但在我的情况下，我想在初始化之前动态地将 th 附加到表格。

我想基于json数据附加 th 从 GetJsonData.aspx 文件中获取。它在“sAjaxSource”中定义：“GetJsonData.aspx ......”

Answer 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 还允许您动态呈现列。

Answer 2

有没有看到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获得的数据创建th，但在初始化之前这样做？然后，您无法像在该代码中那样获得初始化中的数据。我建议使用user827431答案。

jQuery数据表在初始化之前追加

2 个答案: