On my call in line: 31, I'm using all the table columns, so, that's why it won't work the first time it loads in mobile devices the buttons should be shown there. What you can do to stop this behaviour in DataTables is set the autoWidth parameter to false. As far as I understand the event: 'responsive-resize' will be called with an array of boolean values indicating the columns that were rearranged.
Is that design intentional Is there some way to change that function, because it would be ideal for the table to load correctly resized, rather than visibly resizing in front of the user.
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. If no breakpoint class is found for a column, Responsive will determine automatically if the column should be shown or not at any particular viewport width. Resize your browser window, then notice that upon resizing the browser window that the table resizes itself. Webix.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.
You can use event handlers to call the above methods:Īdjusting DataTable to the size of a window, its placed into Basically this two: lumns ( 3 ).visible ( true ) lumns ( 3 ). I saw that this behavior will stop if I comment the lines: 24 and 27 from the jsFiddle. table-striped class adds zebra-stripes to a table: Example Try it Yourself Bordered Table The. Possible solutions can look as shown in the table below: Table 1ĭocument. Press: Run, open the iframe in a new tab, press F12 and put the break-point. table class adds basic styling to a table: Example Try it Yourself Striped Rows The. The initial height of DataTable is 50 px. The width of the columns is determined automatically in order to accommodate the content in the.
#DATATABLES RESPONSIVE RESIZE SOFTWARE#
To use Responsive the primary way to obtain the software is to use the DataTables downloader. The resize() and adjust() methods can lead to one and the same effect.įor example, you have DataTable placed into a 'div' container named 'box'. By default, the table will expand to the width of its container. Responsive will automatically optimise the table's layout for different screen sizes through the dynamic column visibility control, making your tables useful on desktop and mobile screens. Add the next line at the end of the function: (dt.table ().node ()).removeAttr ('style') That should work. Related sample: Dynamic Adjusting to the Parent Container 1 Answer Sorted by: 2 I have the same issue, I'm using the jquery DataTables 1.10.7 and the extension Responsive 1.0.6, I solved by adding a line in the '' in the resize function, about line 560. The usage of string values is incorrect and will cause errors in the sizing logic. The width and height of a datatable must be set through number values. You can also read about sizing in Webix tutorials.
#DATATABLES RESPONSIVE RESIZE HOW TO#
In this chapter you will learn how to set and change sizes for 3 different DataTable elements: Start UI Widgets DataTable Configuration Sizing and Resizing
0 kommentar(er)
