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>

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

1 个答案: