Replies

• jeffw Posts: 38Questions: 5Answers: 0

  June 2013

  This approach works, but I was hoping there's a way to do it in the dataTables object. I've had some surprises when I do some things through dataTables vs through the DOM.
  
  $('table.dataTable tfoot').each(function () {
  $(this).insertAfter($(this).siblings('tbody'));
  });
• aaronw Posts: 89Questions: 3Answers: 4

  June 2013

  I guess one question is why do you want the tfoot after the tbody? It shouldn't make a huge difference.
• jeffw Posts: 38Questions: 5Answers: 0

  June 2013

  This is a responsive page; in mobile view the tables are rendered with the TH headers to the left of each element instead of on top of each column. In the mobile view the footer ends up on top.
  
  Since we're not using sortable headers in the mobile view, the other approach i could use is to disable dataTables using something like enquire.js for mobile widths.
• allan Posts: 63,161Questions: 1Answers: 10,406 Site admin

  June 2013 edited June 2013

  I'm a bit confused as well. I don't really see what difference the Dom order of the three table elements makes (tbody,thead and tfoot). Can you link to a page showing the problem please? The html spec actually says that thead and tfoot must come before the tbody element, but I've not seen a browser that doesn't cope with them in any order.
  
  Allan
• jeffw Posts: 38Questions: 5Answers: 0

  June 2013

  Thanks Allan; I didn't know the spec said tbody comes after tfoot.
  
  The problem i'm having is getting it to work with some responsive CSS (no-more-tables.css), where we render the table headers to the left of the the TD contents for each row. For these, the tfoot is appearing at the top (as that's how the code flows) but we need it at the bottom.
  
  I can just use the jquery workaround to manually rearrange them in order to get it to work as needed.
• allan Posts: 63,161Questions: 1Answers: 10,406 Site admin

  June 2013

  So you'd managed to get the THEAD to show as a column - is that correct? The table has been pivoted effectively? I'm very interested in how you've done that, as that is something I'd like to look at building into DataTables or as a plug-in.
  
  If you are able to show us a code example of what you are working with, we might be able to help resolve the issue.
  
  Regards,
  Allan
• jeffw Posts: 38Questions: 5Answers: 0

  June 2013

  Not really a pivot, more like a CSS trick using data attributes. Similar to No More Tables option here:
  
  http://elvery.net/demo/responsive-tables/
• allan Posts: 63,161Questions: 1Answers: 10,406 Site admin

  June 2013

  Ooo - that is neat! So you've implemented that and it works with DataTables? But the tfoot is messing it up?
  
  Bookmarked to play with :-)
  
  Allan
• jeffw Posts: 38Questions: 5Answers: 0

  June 2013

  Seems to work great with DataTables, except for the tfoot issue, which was easily solved by moving tfoot node after tbody using query's $(document).ready().
• allan Posts: 63,161Questions: 1Answers: 10,406 Site admin

  June 2013

  Looking at the CSS for the No More Tables option, can't you just hide the footer in the same way that the header is hidden?
  
  [code]
  thead tr,
  tfoot tr {
  position: absolute;
  top: -9999px;
  left: -9999px;
  }
  [/code]
  
  It doesn't look like there is anything which is DOM position specific.
  
  Allan
• jeffw Posts: 38Questions: 5Answers: 0

  June 2013

  They hide the thead because the column headers get rendered to the left of the data elements.
  
  But in this case, the footer text is like a footnote for the whole table, it doesn't map to td cells. So we still want it to appear across the bottom.
• allan Posts: 63,161Questions: 1Answers: 10,406 Site admin

  June 2013

  Perhaps you should use a `caption` tag for that rather than a footer in that case?
  
  Allan