将 jQuery 数据 table 与特殊 table header 一起使用时出现问题

Question

我正在尝试使用 jquery-datatables 和 header 制作一个 table，如下所示：

<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-datatables 一起尝试时，它根本不起作用。除了 table header.

之外什么都没有显示

$(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

我发现他们在数量栏 header 和内容中有一些错误。检查此解决方案：

$(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>

Demo

希望对您有所帮助。

将 jQuery 数据 table 与特殊 table header 一起使用时出现问题

Issue while using jQuery Datatables with special table header

html

javascript

jquery

datatables