22

I am using the DataTables plugin (www.datatables.net) for jQuery to display tables on a web page.

After reading through the documentation and doing some searches, I am unable to find out how to completely suppress or hide table headers, using the DataTables options or API.

4 Answers 4

37

Why don't you simply hide them through css (i think datatables requires a thead section to work)?

.dataTables_wrapper table thead{
    display:none;
}

fiddle here: http://jsfiddle.net/LhZF3/

2
  • Thank you. Messing with the DOM/CSS is not the most elegant solution, but at least it works :-) Commented Jul 18, 2011 at 11:50
  • Works great, but still it is very weird that the API itself won't expose such functionality.
    – Yaron Levi
    Commented Sep 18, 2013 at 20:43
15

I know the question is pretty old, but I searched for it today and found another solution ...

In your js / coffee file:

$("#selector").dataTable({
  ... your other options ...

  fnDrawCallback: -> $("#selector thead").remove()
})

Pure JS variant:

$("#selector").dataTable({
  ... your other options ...

  fnDrawCallback: function() {
    $("#selector thead").remove();
  }
});
2
7

Simple add the style display:none inline style to your thead tag.

    <thead style="display:none;">
    </thead>
1

Just add this to your css:

thead {
  display:none;
}
1
  • 3
    Careful. This will suppress all headers from all tables, regardless of Datatables or not. Commented Nov 10, 2017 at 15:51

Not the answer you're looking for? Browse other questions tagged or ask your own question.