Issue while using jQuery Datatables with special table header

Question

I am trying to make a table using jquery-datatables with the header shown below:

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

This works great alone but, when I try it with jquery-datatables it doesn't work at all. Nothing shows up except the 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": ''
          }
        ],
      });

Danny Fardy Jhonston Bermúdez · Accepted Answer · 2015-09-16 23:09:25Z

0

I have found that they have some errors in the amount column header with content. Check this solution:

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

Hope this helps you.

answered Sep 16, 2015 at 23:09

Danny Fardy Jhonston Bermúdez

5,5915 gold badges27 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Danny Fardy Jhonston Bermúdez Over a year ago

Nice. Could you accept my answer as a final answer? Thank you.

Collectives™ on Stack Overflow

Issue while using jQuery Datatables with special table header

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related