Datatables on-the-fly resizing

Question

I m using the marvellous DataTables jQuery plug-in  http   datatables net   Added the FixedColumns and KeyTable extras   Now the table does resize prettily when the window size is changed  However  the containing div of the table can also be resized in width by a jQuery animation  and I haven t found a way to resize the table with it-- it just stays stagnant in its original width  Only if I change the div width in the code before pageload  the table is resized correctly   How can I make the DataTable resize on-the-fly according to both the window width and the containing div width  Thanks in advance   -

User · Answer

document  ready function            a data-toggle  tab     on   shown bs tab   function  e               var target     e target  attr  href       activated tab            alert  target               fn dataTable tables  true     css  width    100                 fn dataTable tables  true     DataTable   columns adjust   draw                    It works for me  with  autoWidth   false

User · Answer

The code below is the combination of Chintan Panchal s answer along with Antoine Leclair s comment  placing the code in the windows resize event     I didn t need the debounce mentioned by Antoine Leclair  however that could be a best practice        window  resize  function               example   DataTable   columns adjust   draw            This was the approach that worked in my case

User · Answer

Use  bAutoWidth   false and go through the example given below  It is working for me   Example       tableId   dataTable     bAutoWidth   false

User · Answer

I know this is old  but I just solved it with this     var update size   function           oTable  css   width    oTable  parent   width           oTable fnAdjustColumnSizing               window  resize function         clearTimeout window refresh size       window refresh size   setTimeout function     update size       250           Note  This answer applies to DataTables 1 9

User · Answer

I got this to work as follows   First ensure that in your dataTable definition your aoColumns array includes sWidth data expressed as a   not fixed pixels or ems  Then ensure you have set the bAutoWidth property to false Then add this little but of JS   update table size   function a datatable      if  a datatable    null  return    var dtb    if  typeof a datatable      string   dtb     a datatable    else dtb   a datatable    if  dtb    null  return     dtb css  width   dtb parent   width       dtb fnAdjustColumSizing         window  resize function       setTimeout function   update table size some table selector or table ref    250         Works a treat and my table cells handle the white-space  wrap  CSS  which wasn t working without setting the sWidth  and was what led me to this question

User · Answer

might be late also like the other answer but I did this early this year and the solution I came up with is using css         window  bind  resize   function                the line below was causing the page to keep loading              tableData   dataTable   fnAdjustColumnSizing            Below is a workaround  The above should automatically work                tableData   css  width    100

User · Answer

Have you tried capturing the div resize event and doing  fnDraw   on the datatable  fnDraw should resize the table for you

User · Answer

I was having the exact same problem as OP  I had a DataTable which would not readjust its width after a jQuery animation  toogle  fast    resized its container   After reading these answers  and lots of try and error this did the trick for me         animatedElement   toggle 100  function                 dataTableId   resize            After many test  i realized that i need to wait for the animation to finish for dataTables to calculate the correct width

User · Answer

I had the same challenge  When I collapsed some menus I had on the left of my web app  the datatable would not resize  Adding  autoWidth   false duirng initialization worked for me       dataTable   DataTable   autoWidth  false

User · Answer

This did the trick for me        dataTable   resize

User · Answer

What is happening is that DataTables is setting the CSS width of the table when it is initialised to a calculated value - that value is in pixels  hence why it won t resize with your dragging  The reason it does this is to stop the table and the columns  the column widths are also set  jumping around in width when you change pagination   What you can do to stop this behaviour in DataTables is set the autoWidth parameter to false       example   dataTable       autoWidth   false        That will stop DataTables adding its calculated widths to the table  leaving your  presumably  width 100  alone and allowing it to resize  Adding a relative width to the columns would also help stop the columns bouncing   One other option that is built into DataTables is to set the sScrollX option to enable scrolling  as DataTables will set the table to be 100  width of the scrolling container  But you might not want scrolling   The prefect solution would be if I could get the CSS width of the table  assuming one is applied - i e  100    but without parsing the stylesheets  I don t see a way of doing that  i e  basically I want     css  width   to return the value from the stylesheet  not the pixel calculated value

User · Answer

You should try this one   var table       example   DataTable    table columns adjust   draw      Link  column adjust in datatable

[javascript] Datatables on-the-fly resizing

Examples related to javascript

Examples related to jquery

Examples related to datatables