- Datatables responsive resize how to#
- Datatables responsive resize full#
- Datatables responsive resize code#
Data tables can be quite wide, and necessarily so. That's because the my_table variable wouldn't be defined until the table initialises, but your show_hide_column() function is called in initComplete, before that initialisation completes.In addition to the techniques below, see this roundup of additional explorations of this problem.ĭata tables don’t do so well with responsive design. So, it doesn't work when it first gets called in initComplete. I already tried with my_table, but it will fire this exception: Uncaught TypeError: my_table is undefined
One more question: how do you get the jquery object from the DataTable This is not entirely truth. The two lines (22-23) you are asking about can be combined into one and since you have the Datatable initialized they are just getting an instance to the Datatable API as described Thanks for your example, it works. The variable my_table should be within scope and available in your show_hide_column function.
Datatables responsive resize code#
The code in your example looks like this: $(document).ready(function(), 250) I don't like this solution because I will have to hard code the breakpoint dimensions, but as I see it seems to be the only one that seems to work I will have to see the window dimensions.
I guess, I will try this with the $(window).resize event instead. My original code is working however, that handler will be triggered infinitely and I think it slows the rendering of my table and sometime the pagination won't work. However, on mobile and tablet-p modes, I want that column to be shown as a detail and not as a column. On desktop and tablet-l modes it is doing what I want: hide the age column. See the next screenshots and you will see why I don't want I tried with the dr-controll class and assigned it to the "age" column, which is the one I actually want to hide or show according to the view, but it is not working as I want, see: Regarding the class logic, I already tried to set the age column to "mobile" and "table-p", but that's not the result I want.
Datatables responsive resize full#
one() handler will be executed only one however, I need to show/hide the column each time that the user enters or leaves the responsive view, which on my case it would be the mobile and tablet-p modes the other modes will show the full table.
Datatables responsive resize how to#
Any idea on how to achieve this? Is there perhaps a better way of achieving what I want?īest Regarding your answer: as far as I know the. So, basically what I need is to temporary disable the responsive-resize event. * Adding and removing a css class -> It keeps running It will run only once, so, it won't be re-enabled. * Appending a boolean flag to the e.data -> It keeps running It says always: undefinedįrom this Stackoverflow answer:, I tried everything: * Adding a global variable, but it seems that inside the event handler that global variable can't be read. * Stop event propagation with: e.stopPropagation(). I really need those two lines since the idea is to hide the age column while on a desktop or a landscape tablet and show it on the other devices. So, this two lines trigger the event again and that's why it will be kept running infinitely. Basically this two:ĭata_lumns( ).visible( true ) ĭata_lumns( ).visible( false )
I saw that this behavior will stop if I comment the lines: 24 and 27 from the jsFiddle. Press: Run, open the iframe in a new tab, press F12 and put the break-point. If you debug the Fiddle using the Developer Tool from Mozilla or Chrome and put a break-point inside the responsive-resize handler (line 34 in the js iFrame), then you will see that that event will be infinitely triggered. The row should be shown only on mobiles and portrait tablets. Right now, I'm working on a responsive Datatable, where I want to hide a column while showing the table on a desktop and on a landscape table.
0 kommentar(er)
