为什么现在显示 DataTable 的列标签？答案

【问题标题】：Why the column labels are now showing for a DataTable?为什么现在显示 DataTable 的列标签？
【发布时间】：2016-03-04 19:39:17
【问题描述】：

我正在尝试使用DataTable 来显示 ajax 请求完成后的数据。

这是我所做的

创建了一个基本表

<div class="wrapper hiddenBlock" id="ReportWrapper">

    <table id="reportTable" class="display">
        <thead>
        </thead>
        <tbody>
        </tbody>
    </table>

</div>

这是我提出 ajax 请求的方式

<script>

    $(function(e) {


        $('#CampaignMenu').change(function(e) {

            $('#ReportWrapper').hide();

            if (  $(this).val() != '0') {
                $('#DisplayReport').attr('disabled', false);
            } else {
                $('#DisplayReport').attr('disabled', true);
            }

        });

        $('#DisplayReport').click(function (e) {


            $.ajax({
                type: 'GET',
                url: '/GetReportData',
                data: { 'campaign_id': $('#CampaignMenu').val() },
                dataType: 'json',
                success: function (json) {

                    $('#reportTable').DataTable({
                        "data": json,
                        columns: [
                            { data: 'chainName' },
                            { data: 'storeID' },
                            { data: 'completed_ll' },
                            { data: 'initial_quota_ll' },
                            { data: 'totalCallableLL' },
                            { data: 'currentStatusLL' },
                            { data: 'completed_cp' },
                            { data: 'initial_quota_cp' },
                            { data: 'totalCallableCP' },
                            { data: 'currentStatusCP' }
                        ]
                    });
                    $('#ReportWrapper').show();
                }
            });

        });

    });

</script>

数据返回并填充表格。但它没有显示列标题并且表格的样式与display 状态here 的样式不匹配

这是我看到的

如何让标签和样式起作用？

【问题讨论】：

标签： jquery ajax datatables

【解决方案1】：

您需要在thead 元素或column.title 选项中指定列标题。

例如，使用column.title 选项指定标题：

$('#reportTable').DataTable({
   "data": json,
   columns: [
      { data: 'chainName', title: 'A' },
      { data: 'storeID', title: 'B' },
      { data: 'completed_ll', title: 'C' },
      { data: 'initial_quota_ll', title: 'D' },
      { data: 'totalCallableLL', title: 'E' },
      { data: 'currentStatusLL', title: 'F' },
      { data: 'completed_cp', title: 'G' },
      { data: 'initial_quota_cp', title: 'H' },
      { data: 'totalCallableCP', title: 'I' },
      { data: 'currentStatusCP', title: 'J' }
   ]
});

您还可以使用thead 标签而不是使用column.title 选项来指定列标题，如下所示：

<table id="reportTable" class="display">
    <thead>
       <tr>
          <th>A</th>
          <th>B</th>
          <th>C</th>
          <th>D</th>
          <th>E</th>
          <th>F</th>
          <th>G</th>
          <th>H</th>
          <th>I</th>
          <th>J</th>
       </tr>
    </thead>
    <tbody>
    </tbody>
</table>

【讨论】：