Is it possible to hide the row with column headers?

hm123

I tried adding this to the CSS

thead {
  display:none;
}

But that doesn't seem to do the trick.

https://jsfiddle.net/hm123/f7sgeoad/2/

Rob Brun

Hi hm123, have you tried this one.

"drawCallback": function( settings ) {
     $("#selector thead").remove();
 }           

Shay

hm123

Sorry, I'm not sure where to insert that line of code, I've tried here and there. Could you tell me? Thanks.

kthorngren

Here is the documentation for drawCallback.

Kevin

hm123

From what I was able to gather from that, it should go into the code here:

 table=$("#mySelection").DataTable({
      "drawCallback": function( settings ) {
     $("#selector thead").remove(); } ,

But nothing changes.

https://jsfiddle.net/hm123/f7sgeoad/4/

kthorngren

You need to change use the proper selector. I think Shay's #selector means to put your selector there. Try this:

      "drawCallback": function( settings ) {
     $("#mySelection thead").remove(); } ,         

Kevin

hm123

That's works, although a little too well, for what I'm aiming for;

I just want to hide the header row from appearing, being visible on the table.

While this code visibly renders the table as such, it also effects the output of the buttons used here. The buttons are set to output whatever is visible (toggled by column visibility).

And unfortunately this code removes not just the theader in the export output, but also all the data that was in the tables.

The same thing happens when I try
$("#mySelection thead").hide()

Is there anyway to keep the output as it was before and only hide the table headers from view, as in just the row with the column titles? I want to keep the buttons (copy, excel, pdf, colvis) working on the table data.

https://jsfiddle.net/hm123/f7sgeoad/5/

Is it possible with CSS? Something along the lines of:

thead {
  display:none;
}

allan

I'd put the filters into a second row in the header and then use thead tr:eq(0) { display: none; } to hide the row in the header with text. However, your JSFiddle work appears to work okay for me (Chrome / Linux).

Allan

hm123

If these solutions (and many have been proposed) work for you guys, that means the problem is on the mobile view end, and is not affecting normal desktop viewing.

In any case, thank you all for the help you've provided, especially Kevin, even though you might not see everything we've sent back and forth within messages, he really helped out on this as he did on many others. I'll keep my questions open in public view so that others can benefit. Thanks once more.

hm123

The solution was to use:

thead {
             position: absolute !important;
             top: -9999px !important;
             left: -9999px !important;
}

allan

Thanks for posting back with your solution - great to hear you've got it working.

Allan