Jquery 数据表不显示列标题

Question

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

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

问题是我不会事先知道标题名称，因为它们会改变。当我使用第三个变量从 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