DataTables with FooTable plugin, failing to hide data in re-order

DataTables with FooTable plugin, failing to hide data in re-order

ComcarPeteComcarPete Posts: 0Questions: 0Answers: 0
edited June 2013 in Plug-ins
I'm using DataTables with FooTable to make my tables responsive. I've implemented the solution in a similar way to this blog:
http://techtoffee.blogspot.co.uk/2013/05/using-footable-to-make-datatable.html

It's all working fine but when I reorder my columns the FooTable initialisation doesn't always get called properly, and although my TH's get hidden on my phone, the TD cells will still appear.
Certain columns will fail every time, sometimes, I've not been able to work out what's causing the the FooTable plugin to fail to redraw.

If I use the DataTable filter to reduce the result set to only a few rows, it fails every time on every column.

I'm initialising my FooTable plugin in the fnDrawCallback function, and if I add a 2000ms delay before building FooTable, it works. All columns are hidden.

So it seems as though the fnDrawCallback is calling my FooTable initialisation before it's rendered the DOM, is that possible? Will fnDrawCallback run before the HTML has been injected?

I can't really link to the page I'm talking about as it's loading in a large amount of AJAX data, which for the same reason I can't put this in JSFiddle.

FooTable website: http://themergency.com/footable/

Replies

  • dpeacockdpeacock Posts: 7Questions: 1Answers: 0
    edited July 2013
    I had a similar issue where filtering/sorting/page changes weren't re-drawing the table correctly. I took a look at the Footable source and beleive it relates to the following line in the resize function:

    [code]
    // This (if) statement is here purely to make sure events aren't raised twice as mobile safari seems to do
    if (!pinfo || ((pinfo && pinfo.width && pinfo.width != info.width) || (pinfo && pinfo.height && pinfo.height != info.height))) {
    [/code]

    It looks like there was code added to get around the table re-sizing multiple times. What I did was change the signature for the resize method to:

    [code]
    ft.resize = function (force) {
    [/code]

    Then changed the if statement to:

    [code]
    if (force || !pinfo || ((pinfo && pinfo.width && pinfo.width != info.width) || (pinfo && pinfo.height && pinfo.height != info.height))) {
    [/code]

    Then added in the following event binding:

    [code]
    $table.bind('footable_force_resize', function () {
    ft.resize(true);
    });
    [/code]

    On the data table side I simply have the following set for fnDrawCallback

    [code]
    "fnDrawCallback": function (oSettings) {
    var table=$(".footable").footable();
    table.trigger('footable_resize');
    table.trigger("footable_force_resize");
    }
    [/code]

    After doing this it seems to work the way I wanted it to. Definitely a bit of a hack, but it's a relatively easy solution to get things working correctly.

    Let me know if it helps you at all...
  • maxanmaxan Posts: 3Questions: 0Answers: 0
    i have same issue and cant't solve it by using @dpeacock solution .is there any help about this ???
This discussion has been closed.