javascript - Jquery数据表不显示列标题

Question

这与问题 here 相关。然而，我的情况有点不同。我想实现另一个问题中相同的数据表示例 here 。正如您所看到的，您必须传递列名称才能初始化表标题，如下所示

 "columns": [
        { "data": "name" },
        { "data": "position" },
        { "data": "office" },
        { "data": "extn" },
        { "data": "start_date" },
        { "data": "salary" }
    ]

问题是我事先不知道 header 名称，因为它们会改变。当我从 ajax 获取数据时，我尝试初始化列名称，如下所示，使用第三个变量(请参阅其中显示的“注意这一行”，但这不起作用。

            //PAY ATTENTION TO THIS LINE
            var columnsHeaders = [];


      var ab = $('#dynamicScenarioTable').DataTable({
              "bDestroy": true,
              "dom": 'T<"clear">lfrtip',
              "ajax": {
                    "type": "POST",
                    "url": "dynamicScenario.htm",
                    "data": tags,
                    "dataType": "json",
                    "dataSrc": function(json){
                          //PAY ATTENTION TO THIS LINE
                          columnsHeaders.push({"data": json.header });
                          return json.vals;
                    },
                    "error": function(exception)
                    {
                       displayMessageOnError();
                    }
               },  
                //PAY ATTENTION TO THIS LINE
               "columns":  [columnsHeaders],

               tableTools: tableDefaultS.tableTools
      });

有什么想法吗？

Answer 1

您可以将数据源属性添加到表标题上构建的 TH 标记。然后，您可以让 jQuery 读取这些内容并构造数组以发送到 DataTable 构造函数中。

<tr>
    <th data-source="name">Name</th>
    <th data-source="position">Postion</th>
    <th data-source="start_date">Start Date</th>
</tr>

然后在 JavaScript 中执行类似的操作来构造数组

var columnsHeaders = [];
$("#dynamicScenarioTable thead th").each(function() {
    colmnsHeaders.push(
        {
            data : $(this).data("source")
        }
    );
});

// construct your DataTable after this