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

我正在尝试使用DataTable来显示ajax请求完成后发出的数据。为什么列标签现在显示为DataTable？

这里是我做了什么

创建了一个基本表

<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

这是我看到

我怎样才能获得标签和工作风格？

来源

2016-03-04 Mike A

您需要在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>

来源

2016-03-04 19:51:17

谢谢。这工作！ –

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

回答

相关问题