Answers

• Rob Brun Posts: 56Questions: 2Answers: 14

  August 2017 edited September 2017

  Hi hm123, have you tried this one.

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

  Shay
• hm123 Posts: 84Questions: 27Answers: 1

  August 2017

  Sorry, I'm not sure where to insert that line of code, I've tried here and there. Could you tell me? Thanks.
• kthorngren Posts: 21,344Questions: 26Answers: 4,954

  August 2017 edited August 2017

  Here is the documentation for drawCallback.

  Kevin
• hm123 Posts: 84Questions: 27Answers: 1

  August 2017 edited September 2017

  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 Posts: 21,344Questions: 26Answers: 4,954

  August 2017

  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 Posts: 84Questions: 27Answers: 1

  August 2017 edited September 2017

  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 Posts: 63,540Questions: 1Answers: 10,476 Site admin

  August 2017

  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 Posts: 84Questions: 27Answers: 1

  August 2017

  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 Posts: 84Questions: 27Answers: 1

  August 2017 edited August 2017 Answer ✓

  The solution was to use:

  thead {
               position: absolute !important;
               top: -9999px !important;
               left: -9999px !important;
  }
  
• allan Posts: 63,540Questions: 1Answers: 10,476 Site admin

  August 2017

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

  Allan