Search code examples
javascriptjqueryfootable

Footable triggers not working when trying to resize table after ajax call

I'm using footable tables throughout a website I am creating and up until now it's mainly been plain sailing however I've come unstuck when adding server side pagining to a table. Basically I am getting data via an ajax call, when the page first loads everything is fine footable is initialized correctly and columns are collapsed in mobile view, however when I press the next page button the new data is added to the table however in mobile view the columns do not collapse. see image below:

enter image description here

For the purpose of clarity there are multiple footable tables on this web page, the table above is implemented inside a tab control using the jquery.responsiveTabs plugin. If I maximise and then minimise the browser the footable breakpoints are added to the new row and the columns collapse.

When adding the new rows to the table I am using the ajax demo provided in the Advanced Demo function here

My implementation of the ajax request is as follows:

$.ajax({
    url: '/myurl/getdata/',
    success : function(data) {
        $('#despatchTbl tbody').append(data).trigger('footable_redraw');
    }
});

This is identical to the code in the footable documentation aside from refering to the table by ID instead of element. I have also tried other footable triggers such as footable_resize, footable_initialize and a new one I added to fix a similar issue when swapping tabs footable_force_resize but had no luck what so ever and there are no errors in the console either.

My scripts are being declared in the following order:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="/scripts/footable.js" type="text/javascript"></script>
<script src="/scripts/jquery.responsiveTabs.js" type="text/javascript"></script>
<script type="text/javascript" src="/scripts/ajaxlibs.js"></script>

and just below the script declaration I am initializing footable as follows:

<script language="javascript">
    $(function() {
       $('.footable').footable()
    }); 
</script>

I've also tried the following which I've added with success to the tab activate event, fired everytime I change tabs.

var table = $('.footable').footable();
table.trigger('footable_resize');

However when I run this after the ajax call after the page has been initialized I get the following error in the console.

typeerror $(...).footable is not a function

I'm at my wits end with this now and I really don't want to have to ditch footable and find an alternative at this late stage. I've trawled through various question on here and google and none have the solution to my issue so any help would be massively appreciated!!!

Solution

  • Without seeing the markup for the table itself it's difficult to be entirely sure of the problem but I'll go with the issues I see.

    I have never used responsiveTabs but I had a quick look at the documentation. When changing tabs you need to resize the footable using the activate callback of responsiveTabs plugin like below:

    $("#tabs").responsiveTabs({
    rotate: false,
    startCollapsed: 'accordion',
    collapsible: 'accordion',
    activate: function(e, tab) {
      $('.footable').trigger('footable_resize');
    }
});

    Here is correct approach for adding data to an existing footable, I've used your ajax success handler as an example: 

    $.ajax({
    url: '/myurl/getdata/',
    success : function(data) {
        // this gets the data within the footable
        $footable = $('#despatchTbl').data('footable');

        // use footables appendRow to ensure correct pagination
       $footable.appendRow(data);
    }
});

    You only need to initialize a table once by calling $('.footable').footable() on page load.