问题，而使用jQuery数据表与特殊的表头

Question

我正在尝试使用jquery-datatable表与标题如下所示:

<table id="tableau" class="display" width="100%" align="center">
  <thead>
    <tr>
      <th colspan="2"></th>
      <th colspan="2"></th>
      <th rowspan="2"></th>
      <th colspan="2"></th>
      <th rowspan="2"></th>
    </tr>
    <tr>
      <th colspan="2"></th>
      <th></th>
      <th></th>
      <th></th>
      <th></th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

这个单独工作很好，但是，当我尝试使用jquery-datatable时，它根本不起作用。除了表头什么也没显示。

$(document).ready(function() {
      var table = $('#tableau').DataTable({
        "scrollY": "500px",
        "scrollCollapse": true,
        "autoWidth": true,
        "paging": false,
        "processing": false,
        "info": false,
        "ordering": false,
        "searching": false,
        "data": [{
            "ta": "ta",
            "tb": "tb",
            "tc": "tc",
            "td": "td",
            "te": "te",
            "tf": "tf",
            "tg": "tg",
            "th": "th"
          },
          {
            "ta": "ta",
            "tb": "tb",
            "tc": "tc",
            "td": "td",
            "te": "te",
            "tf": "tf",
            "tg": "tg",
            "th": "th"
          },
        ],
        "columns": [{
            "data": null,
            "defaultContent": ''
          },
          {
            "data": "ta"
          },
          {
            "data": null,
            "defaultContent": ''
          },
          {
            "data": "tb"
          },
          {
            "data": null,
            "defaultContent": ''
          },
          {
            "data": null,
            "defaultContent": ''
          },
          {
            "data": "tc"
          },
          {
            "data": null,
            "defaultContent": ''
          }
        ],
      });

Answer 1

我发现他们在金额列标题中有一些错误。检查这个解决方案:

$(function() {
  var dataSet = [{
    "ta": "ta",
    "tb": "tb",
    "tc": "tc",
    "td": "td",
    "te": "te",
    "tf": "tf",
    "tg": "tg",
    "th": "th"
  }, {
    "ta": "ta",
    "tb": "tb",
    "tc": "tc",
    "td": "td",
    "te": "te",
    "tf": "tf",
    "tg": "tg",
    "th": "th"
  }, ];
  $("#tableau").DataTable({
    scrollY: "500px",
    scrollCollapse: true,
    autoWidth: true,
    paging: true,
    processing: true,
    info: true,
    ordering: true,
    searching: false,
    data: dataSet,
    columns: [{
      "data": "ta"
    }, {
      "data": "tb"
    }, {
      "data": "tc"
    }, {
      "data": "td"
    }, {
      "data": "te"
    }, {
      "data": "tf"
    }, {
      "data": "tg"
    }, {
      "data": "th"
    }]
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<link href="http://cdn.datatables.net/1.10.9/css/jquery.dataTables.min.css" rel="stylesheet" />
<table id="tableau" class="display" width="100%">
  <thead>
    <tr>
      <td>ta</td>
      <td>tb</td>
      <td>tc</td>
      <td>td</td>
      <td>te</td>
      <td>tf</td>
      <td>tg</td>
      <td>th</td>
    </tr>
  </thead>
</table>

演示