How to suppress table headers completely in jQuery DataTables?

Question

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.

score 36 · Accepted Answer · answered Jul 18 '11 at 11:47

36

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/

answered Jul 18 '11 at 11:47

Nicola Peluchetti

76,206
31
145
192

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

s.krueger · Answer 2 · 2014-10-08T22:17:59.853

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();
  }
});

edited Oct 08 '14 at 22:17

answered Apr 18 '13 at 16:58

s.krueger

1,043
8
13

this worked for me - with display:none the table header still influences the body rendering .. – Benjamin Apr 29 '14 at 15:04
See also here: http://stackoverflow.com/questions/16802753/jquery-datatables-hide-thead – Thomas Kekeisen Jun 02 '15 at 10:20

score 7 · Answer 3 · answered Jun 28 '17 at 05:15

7

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

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

answered Jun 28 '17 at 05:15

Lucky

16,787
19
117
151

score 1 · Answer 4 · answered Nov 11 '16 at 04:59

1

Just add this to your css:

thead {
  display:none;
}

answered Nov 11 '16 at 04:59

Esa Mäkinen

160
8

3

Careful. This will suppress all headers from all tables, regardless of Datatables or not. – Ryan Shillington Nov 10 '17 at 15:51

How to suppress table headers completely in jQuery DataTables?

4 Answers4

Linked