Responsive Datatable Gets Narrower and Narrower when clearing Search box

JustinCook

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/

JustinCook

Now we noticed that when we click the pagination buttons, the same thing happens. With each click the table gets smaller.

JustinCook

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

JustinCook

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.

allan

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