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

这链接到问题here。但是，我的情况有些不同。我想从另一个问题here实现相同的数据表示例。如您所见，您必须传递列名才能初始化表头，如下所示

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

问题是我不知道标题名称，因为它们会更改。当我像下面那样使用3rd变量从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
      });

有任何想法吗？

最佳答案

您可以将数据源属性添加到表标题上构建的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