Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to suppress table headers completely in jQuery DataTables?

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.

like image 653
mydoghasworms Avatar asked Jul 18 '11 11:07

mydoghasworms


People also ask

How to remove Header in jQuery DataTable?

Simple add the style display:none inline style to your thead tag. Show activity on this post. Careful. This will suppress all headers from all tables, regardless of Datatables or not.

How to set fixed Header in DataTable?

The easiest way to get and use FixedHeader is to use the DataTables download builder where you can select the software that you wish to use on your page and have a single Javascript and CSS file created and hosted for you.

What does DataTable destroy do?

function destroy( [ remove ] ) Description: Restore the tables in the current context to its original state in the DOM by removing all of DataTables enhancements, alterations to the DOM structure of the table and event listeners.


4 Answers

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/

like image 180
Nicola Peluchetti Avatar answered Oct 22 '22 15:10

Nicola Peluchetti


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();
  }
});
like image 33
s.krueger Avatar answered Oct 22 '22 17:10

s.krueger


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

    <thead style="display:none;">
    </thead>
like image 7
Lucky Avatar answered Oct 22 '22 17:10

Lucky


Just add this to your css:

thead {
  display:none;
}
like image 1
Esa Mäkinen Avatar answered Oct 22 '22 17:10

Esa Mäkinen