Answers

• F12Magic Posts: 109Questions: 0Answers: 28

  April 2017 Answer ✓

  Since you already have jquery loaded, you can use a jquery selector. Your dataTable should have a unique id so you could use something like (simplified):

  var footer = $('#tableID tfoot');
  

  For more details, look at the comments(7) tab on this examples API page: Individual column searching (text inputs)
  
• allan Posts: 63,542Questions: 1Answers: 10,476 Site admin

  April 2017 Answer ✓

  The order of the HTML doesn't effect where the footer it shown. In fact, HTML standards require that the order be as you have shown - header, footer then body. The browser will put the tfoot at the footer of the table.

  You have two options:

  1. Use CSS to make the footer a header: table tfoot { display: table-header-group; }. That can mess some of DataTables extensions up though (FixedColumns and FixedHeader struggle with this).
  2. Just have two tr rows in your thead.

  Allan
• edwardc Posts: 30Questions: 11Answers: 0

  April 2017

  I end up with a mix of code that fixed other problem also: flickering in x scrolling.

  Using the exemple from here I changed the code to:

  .appendTo($(column.header()).empty())
  

  (where <b>.header</b> is the main idea) and added another row with td in header.
  Works like charm and I got a great secondary effect: filtering columns now also triggers a sorting. I consider this a feature not a bug (sounds like Bill Gates a bit, I know).
• edwardc Posts: 30Questions: 11Answers: 0

  April 2017

  Strike last comment.

  $('#myID tfoot tr').appendTo('#myID thead');
  

  works like charm when there is no scrollX enabled.

  @allan : any idea how can I attach the filter to the second row in thead? I can not manage to retrieve it so both sort and filter attach to the same column witch is terrible.
  Playing with "orderCellsTop" was not successful either as it only change the default row to attach both listeners.
• allan Posts: 63,542Questions: 1Answers: 10,476 Site admin

  April 2017

  any idea how can I attach the filter to the second row in thead?

  You need to modify whatever the selector is that you are using. thead tr:eq(1) will select the second row in thead for example.

  Allan
• klukiyan Posts: 2Questions: 1Answers: 0

  October 2018

  @allan , @edwardc
  Hi,
  Thank you for this discussion it almost helped. Though I wasn't happy that when clicking on the filter dropdown, the SORT arrows are also clicked.
  I've also tried to make the 2 tr in header. But then both the filtters and sorts went into seconds row. So it wasn't a solution either

  Can you please explain me how you did it, and where should I put the thead tr:eq(1) entry mentioned? what does it do?

  Meanwhile I ended using the CSS trick that puts the footer into header group, and it's almosts almost what I needed.

      <style>
          /* placing the footer on top */
          tfoot {
              display: table-header-group;
          }}
      </style>
  
• kthorngren Posts: 21,351Questions: 26Answers: 4,955

  October 2018

  See if this example helps:
  http://live.datatables.net/giharaka/1/edit

  Kevin