Responsive Datatable Gets Narrower and Narrower when clearing Search box

Responsive Datatable Gets Narrower and Narrower when clearing Search box

JustinCookJustinCook Posts: 5Questions: 2Answers: 0
edited December 2016 in Free community support

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

  • JustinCookJustinCook Posts: 5Questions: 2Answers: 0

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

  • JustinCookJustinCook Posts: 5Questions: 2Answers: 0

    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

  • JustinCookJustinCook Posts: 5Questions: 2Answers: 0

    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.

  • allanallan Posts: 63,538Questions: 1Answers: 10,476 Site admin
    Answer ✓

    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

This discussion has been closed.