jquery - 为什么现在显示数据表的列标签？

Question

我正在尝试使用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

这就是我所看到的

如何让标签和样式发挥作用？

Answer 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>