Jquery数据表不显示列标题

时间:2015-07-10 10:23:59

标签: javascript jquery ajax datatable

这与问题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
      });

有什么想法吗?

1 个答案:

答案 0 :(得分:0)

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