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.
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/
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();
}
});
Simple add the style display:none inline style to your thead tag.
<thead style="display:none;">
</thead>
Just add this to your css:
thead {
display:none;
}
The other answers work, but if you are using the KeyTable extension with the DataTables Editor, hiding the header (via display:none) or removing it (via $().remove()) will prevent KeyTable from working properly. (I'm not sure why, but this is empirically true for me with DataTables v.1.13.5, Editor v.2.0.8, and KeyTable v2.10.0: inline editing is no longer triggered by mouse clicks or key presses when the header is removed/hidden.)
A workaround that doesn't have this drawback is to set the header row height to 0, using CSS:
#selector thead tr {
height: 0;
}
or the drawCallback configuration setting:
drawCallback: function (settings) {
$("#selector thead tr").css('height', 0);
}
