Responsive Datatable Gets Narrower and Narrower when clearing Search box
Responsive Datatable Gets Narrower and Narrower when clearing Search box
Here is the debug code: onuqip
The issue I am having is that I created a responsive datatable using the bootstrap add ons and it's working fine except when I put some characters in the search box and then back them out (clearing the search box). When I do this, the data table gets narrower and narrower, until it no longer is even on the page. I've done alot of Googling and looking through this site and I believe that the potential solution is to have the table redraw itself when the search box is cleared, but I am not sure why this would even be happening anyway. The table is behind a firewall so I can't share it, but I did create a JFiddle for you to review: https://jsfiddle.net/JustinsCook/4up2yuvr/1/
This question has an accepted answers - jump to answer
Answers
Now we noticed that when we click the pagination buttons, the same thing happens. With each click the table gets smaller.
And apparently, I wasn't the first to have this issue....I see there's another forum post from someone else: https://datatables.net/forums/discussion/20391/columns-shrink-on-every-click
I have resolved my issue....In my efforts to get the table to table to be responsive, I read somewhere to add the following code snippet into the <script> block:
"drawCallback": function( settings ) {
$("#myTable").wrap( "
" );
That was causing the issue, once I removed that, it works just fine again.
Hi,
Thanks for the updates - good to hear you've got it working.
The
wrap
call looks like an old hack to very the responsive part working with Bootstrap. It should work directly without any hacks now (as you are hopefully seeing!).Allan