Replies

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

  May 2012

  Ho ware you showing and hiding columns? With fnSetColumnVis or something else?
  
  Allan
• CodeWzrd Posts: 3Questions: 0Answers: 0

  May 2012

  Currently I am following the tutorial on Filament's site which includes CSS and JS code. This combo is what is hiding/showing columns. It's dynamic based on CSS media queries.
  
  But I'm thinking this is not the right way and I will need to do something similar purely with DataTables and the APIs. But I'm not sure where to start.
• allan Posts: 63,498Questions: 1Answers: 10,471 Site admin

  May 2012

  That's correct - DataTables can resize dynamically - http://datatables.net/release-datatables/examples/basic_init/flexible_width.html . However, I don't know how you'd get that to work with media queries, since you need to actually change the DOM to add and remove columns, not just alter the styles, which is what the Filament blog is using.
  
  So you'd probably need to use a resize event handler and add / remove columns with the API method as required by the space available.
  
  Allan
• scaleto Posts: 1Questions: 0Answers: 0

  May 2012

  You can use
  
  $(document).ready(function(){
  
  //If the User resizes the window, adjust the #container height
  $(window).bind("resize", resizeWindow);
  
  function resizeWindow( e )
  {
  var newWindowWidth = $(window).width();
  //var newWindowHeight = $(window).height();
  //$("#container").css("min-height", newWindowHeight );
  
  if(newWindowWidth > 1024)
  {
  /* Do Something */
  }
  elseif((newWindowWidth >= 600) && (newWindowWidth <= 1024))
  {
  /* Do Something */
  oTable.fnSetColumnVis( 1, false );
  }
  elseif(newWindowWidth < 600)
  {
  /* Do Something */
  oTable.fnSetColumnVis( 1, false );
  oTable.fnSetColumnVis( 2, false );
  oTable.fnSetColumnVis( 3, false );
  }
  /* Display Width & Height */
  //$("#W").text(newWindowWidth);
  //$("#H").text(newWindowHeight);
  }
  });
  
  
  Source : http://www.snipplr.com/view.php?codeview&id=9097