Replies

• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  September 2010

  Hi Ryan,
  
  Thanks for your kind words! Good to know that DataTables is proving to be useful!
  
  1. FixedHeader first - I've just tried my examples with an extra TR element in the header, and it appears to work okay. If you've got the 'infinite processing indicator' that would suggest a Javascript error has occurred somewhere - is there any indication of this on the Firebug console (or whatever debugger you use)?
  
  2. Column header clicks - the issue here is the bubbling of the events going back up the DOM to cause the sort to trigger as well. You might be able to get around tis by simply cancelling the bubble with a click handler on the input elements ( http://api.jquery.com/event.stopPropagation/ ). If this doesn't work (I expect it should, although I've not tried it), an alternative would be to detach the sort listener DataTables puts on the column headers, and then attach your own using fnSortListener ( http://datatables.net/api#fnSortListener ) and a bit of logic based on which element was clicked on.
  
  3. Footer breaking auto width - that's very odd indeed! I use a footer in most of my demo tables, and I've not seen this behaviour before. Do you have an example you can put up showing the problem?
  
  Thanks,
  Allan
• rcwalsh Posts: 12Questions: 0Answers: 0

  September 2010

  For FixedHeader, this is the error I get in Firefox Error Console (when I try to have multiple header rows):
  
  Error: jQuery("thead:eq(0)>tr th:eq(" + e + ")", a)[0].style.width is not a function
  Source File: http://localhost/js/jquery.dataTables.FixedHeader.min.js
  Line: 87
  
  However, I won't need multiple header rows if I can figure out what you mentioned in #2. I've tried a bit of event.stopPropagation and haven't had luck yet but will keep trying.
  
  I no longer have an example of the footer problem since I'm no longer using footers anywhere, but I'll let you know if I get to that again.
  
  Thanks!
• rcwalsh Posts: 12Questions: 0Answers: 0

  September 2010

  I got rid of my second header row, put the dropdown filter into the th of the header row, and added a stopPropagation command as you suggested. Now everything (including my FixedHeader) works in Firefox and IE, but Chrome doesn't seem to let me use the dropdown at all. I'll keep exploring. Thanks for your help.
  
  [code]
  $('#timePosted').click( function(event)
  {
  event.stopPropagation();
  });
  [/code]
• rcwalsh Posts: 12Questions: 0Answers: 0

  September 2010

  I made the filterable column unsortable by using
  "bSortable": false
  and Chrome still wouldn't let me use the dropdown, so then I removed the FixedHeader plugin entirely, and Chrome STILL wouldn't let me use the dropdown, though it's not showing me any errors, so I'm now wondering if for some reason Chrome+DataTables doesn't allow a dropdown in a TH?
  
  Thanks!
• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  September 2010

  Urm - this is a bit of a tricky one!
  
  This is basically what the above event handlers should be doing:
  
  [code]
  document.addEventListener("DOMContentLoaded", function () {
  document.getElementById('test').addEventListener('click', function (e) {
  e.stopPropagation();
  }, false );
  }, false)
  [/code]
  which on a super simple page works absolutely fine in Webkit.... however, (sudden thought process while typing) DataTables is adding the following code to each TH element:
  
  [code]
  $('th', oSettings.nTHead).mousedown( function (e) {
  this.onselectstart = function() { return false; };
  return false;
  } );
  [/code]
  Can be seen with visual event ( http://www.sprymedia.co.uk/article/Visual+Event ) and that is what is causing this effect. Funny that Firefox behaves differently - I think that would be the return false effect.
  
  Comment out those lines in _fnDrawHead and it works absolutely fine... So now we come to how to do this with default DataTables - just unbind the event:
  
  [code]
  $('#example thead th').unbind('mousedown');
  [/code]
  
  I've just tried this and it seems to work well for me:
  
  [code]
  var oTable = $('#example').dataTable();
  new FixedHeader( oTable );
  
  $('#example thead th').unbind('mousedown');
  
  $('select[name="timePosted"]').click( function (e) {
  e.stopPropagation();
  } );
  
  $('input[name="allan"]').click( function (e) {
  e.stopPropagation();
  } );
  [/code]
  Phew!
  
  Good luck,
  Allan
• rcwalsh Posts: 12Questions: 0Answers: 0

  September 2010

  Brilliant! You are so awesome. I'm so excited that this is all working. =-) Thanks so much for your help! -Ryan