Usage with ajax

[MrBushid0]

Hello,

First, Thank you for the plugin.

I would also like to apologize in advance if this is not a bug/issue but due to my lack of knowledge and should be posted elsewhere...

I'm trying to use footable with JQM, the data is retrieved via a REST service. The response is in json format and it seemed that every time i make an $.ajax or $.getJSON call, the table is filled but it loses its responsiveness.

At first, i thought that it may have something to do with JQM but it doesn't seem to be the case.

For example. If i fork footable's gist and replace the following code in data-generator.js

Original code: This of course works 👍 .

rows = rows || 100;
    extraCols = extraCols || 0;
    for (var i = 0; i < rows; i++) {
      var data = {
        firstName: firstNames[Math.floor(Math.random() * firstNames.length)],
        lastName: lastNames[Math.floor(Math.random() * lastNames.length)],
        jobTitle: jobTitles[Math.floor(Math.random() * jobTitles.length)],
        status: statuses[Math.floor(Math.random() * statuses.length)],
        dob: randomDate()
      };
      var row = '<tr>';
      //row += '<td class="expand"></td>';
      row += '<td>' + data.firstName + '</td>';
      row += '<td>' + data.lastName + '</td>';
      row += '<td>' + data.jobTitle + '</td>';
      row += '<td data-value="' + data.dob.getTime() + '">' + data.dob.getDate() + ' ' + months[data.dob.getMonth()] + ' ' + data.dob.getFullYear() +'</td>';
      row += '<td data-value="' + data.status.value + '">' + data.status.name + '</td>';
      for (var j = 0; j < extraCols; j++) {
        row += '<td>' + (i+1) + '.' + (j+1) + '</td>';
      }
      row += '</tr>';
      document.writeln(row);
    }

Manually constructed Json code: This also works.

    var mydata = '{ "data": [';
        mydata += '{"firstName":"Maxine","lastName":"Haner","jobTitle":"Technical Services Librarian","dob":"6 Aug 1976","status":"Active"},';
        mydata += '{"firstName":"Maxine","lastName":"Haner","jobTitle":"Religious Activities Director","dob":"12 Aug 1956","status":"Disabled"},';
        mydata += '{"firstName":"JSON","lastName":"http://www.json.org/","jobTitle":"blah blah blah","dob":"0213876","status":"Disabled"}';
        mydata += '] }';

        var json = $.parseJSON(mydata);

           for(var i=0; i < json.data.length; i++){

                var row = '<tr>';

                row += '<td>' + json.data[i].firstName+ '</td>';
                row += '<td>' + json.data[i].lastName + '</td>';
                row += '<td>' + json.data[i].jobTitle + '</td>';
                row += '<td>' + json.data[i].dob + '</td>';
                row += '<td>' + json.data[i].status + '</td>';

                row += '</tr>';

                $("table tbody").append(row);

            }

Result:

Google json: Table is filled but is no longer responsive

    var url = 'http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=json&callback=?';

       $.getJSON(url,function(response) {

           for(var i=0; i < response.responseData.results.length; i++){

                var row = '<tr>';

                row += '<td>' + response.responseData.results[i].titleNoFormatting + '</td>';
                row += '<td>' + response.responseData.results[i].url + '</td>';
                row += '<td>' + response.responseData.results[i].GsearchResultClass + '</td>';
                row += '<td>' + response.responseData.results[i].visibleUrl + '</td>';
                row += '<td>' + response.responseData.results[i].visibleUrl + '</td>';

                row += '</tr>';

                $("table tbody").append(row);

            }
       });

Result: Same thing happens with the jqm app accesing the internal rest service.

It looks to like the footable's attributes are not applied to the individual cells anymore.

I'm not sure if this is 'by design', a bug/issue with footable, jquery or 'most likely' me :).

Can somebody shed a light on what is happening here?

Thanks

[tkorsback]

Hi,
I just started on a new project and thinking of using footable for my tables. I will also load content with ajax so i will most likely get this problem also. I have not looked at the code yet but one thing I can think of is that footable needs to be "refreshed" after the ajax call i done. I don't know if this is the case but it could be. I'll be back when i'm at that point in the project.

[bradvin]

Hey guys,

once footable is initialized, a specific class name is added to the table and then when footable is called again on the table it checks for that class name and if it exists then it does nothing (cause it assumes footable has already run on that table). One way around this is to pull back the entire table in your ajax response and running the $(table).footable(); code on it when the ajax call is complete.

But I am wanting to add a new option so you can call something like:

$(table).footable({forceRefresh:true});

So you wont need to get the entire table back from ajax call, cause maybe you just want to add some rows to the existing table or paginate the existing table

[tkorsback]

That what I thought. An option to refresh the table would be nice. Great work Bradvin, the plugin looks very promising!

[MrBushid0]

Hello guys,

I called $(table).footable(); after the ajax call and it's working now.

The plugin is very promising indeed, Thank you Bradvin!!!

[thehappycoder]

I am using footable-0.1. After update, the footable magic breaks and calling footable() again doesn't help. Is footable-0.5 having same issue?

jQuery('.footable').removeClass('footable-loaded').footable() doesn't help.

[bradvin]

Please upgrade to 0.5

There is an event in 0.5: "footable_initialized" which you must trigger on the table, rather then trying to removeClass and re-init footable. Doing a reinit like you are doing will only cause issues and is not recommended at all.

rather do the following:

jQuery('.footable').trigger('footable_initialized');

[thehappycoder]

Installed version 0.5 and called jQuery('.footable').trigger('footable_initialized'); The row didn't shrink as expected.

[bradvin]

You are right - I have setup a new AJAX demo and got the same issue as you.

I have fixed the issue and will commit those changes as soon as I have tested everything

I will post here again after the commit

[thehappycoder]

ok, will be very grateful to have this :) In June I deploy new version of our app to production.

[lilith712]

Hi, I have noticed that I have an issue when I trigger footable_initialized - $('#table').trigger('footable_initialized');
I get the error "e.ft is undefined" on the line var $table = $(e.ft.table), $tbody = $table.find('> tbody'), $th; in footable.sortable.js
Am I missing something?
Thank you

[bradkeys]

I'm having the same issue as @lilith712.

$('.footable').trigger('footable_initialized') causes the error mentioned above. Using $('.footable').trigger('footable_resize') does not cause an error. However, neither method appears to resize the table to the original specified page size. After adding new rows via AJAX, the current page gets larger. Clicking a sortable column does trigger the table to resize properly.

[bradvin]

@lilith712 @bradkeys please can you try the V2 branch out - I have been making a lot of changes to that branch and as soon as I have completed all the demos and docs, I will be merging it back into master

[bradkeys]

Actually I have been trying it out the V2 branch all night. Event interception and being able to do this table.trigger('footable_setup_paging'); is definitely key to making this work with paginated AJAX requests.

Thanks a lot and keep up the great work.

[uvadoug2]

@bradkeys were you successful in getting the $('.footable').trigger('footable_initialized') to work with the V2? I was not able to and still get the same error. footable_resize also did not work for me.

[bradkeys]

@uvadoug2 Yup it worked just fine for me back then after switching to V2. Perhaps something has changed since.

I stopped using FooTable and am now using Bootstrap 3 with AngularJS to do what we need.

[jesucarr]

I had a similar issue updating dynamically the table rows, and V2 fixed it for me.

Hopefully we see the official new release soon.

Great work!

[bradvin]

glad you got it working with the V2 branch @jesucarr

I am busy finishing the docs and demos for V2, which were lacking in the original release and I want to do it right this time around. Hopefully V2 will be available by the end of July

[likentong]

I tried V2 with dynamically table rows by calling $('.footable').trigger('footable_initialized'), the added row did resize correctly but I faced 2 problems:

a) Every time a single row is added dynamically, it will add another "+" expand image to the previous row.
b) If I add sort & pagination javascript, I will get the error "table is undefined" on the line var var $table = $(ft.table), $tbody = $table.find('> tbody'); as what @lilith712 reported.

[bradvin]

I have made a lot of changes to V2 branch and included a lot more demos and docs within the demos.

I have also changed the event name to trigger. Rather call $('.footable').trigger('footable_initialize');

@liken85 the duplicate "+" bug is now fixed
@lilith712 the table is underfined errors have been fixed

Check out the demo ajax.htm

Please test it out and let me know if you find any issues. thanks

[bradvin]

@liken85 to hide a column completely, check out the hidden-columns.htm demo.

All you need to do is add a few data attributes for the column:

data-hide="all" - this makes sure the column is hidden at all breakpoints

data-ignore="true" - this makes sure the column is left out the of detail row

[likentong]

@bradvin, thank you. I have figured it out & that's the reason why I deleted the comment.

[jesucarr]

@bradvin just updated to your latest V2 version and ajax updates on rows stopped working for me. Reverting back to the version you had 14 day ago fixes it

[bradvin]

I think some event names have changed - do you have an online demo I can test out?

[jesucarr]

Sorry mate my code is in a private area :/

[thehappycoder]

Tried the V2. It works :) and now I can also finally get rid of my custom css because the +/- are fonts now. However, there is small bug. I'll post it under separate issue.

[bgil]

Awesome tables!
I'm using Version : 2.0.1.1 and had similar problems. I had this app that would generate tables after each DB query. At first I tried adding the footable class and calling initialize on the whole, new, table. But the responsiveness was not applied. So, I created static table with thead sections in the HTML. These do not vary. And I apply footable() to them during load. Then after each ajax query I do the following:

// this is the code that runs after the AJAX call. All the data is received and
// the variable 'html' holds the new contents of the table body
var wrapperDiv =$('#WrapperId');
var tableTable = $('#TableId');
var tableBody = $('#TableBodyId');
var ft = tableTable.data('footable');
hasFooTable = ft && ft != null;
if (hasFooTable) {
ft.reset();
}
tableBody.empty().html(html);
if (hasFooTable) {
tableTable.footable();
}
// all of the above is done with the wrapperDiv hidden and the user sees a progress bar.

// Now make sure the table is visible
wrapperDiv.show();

// finish with the JQuery trigger() with the 'footable_initialize event
tableTable.trigger('footable_initialize');

Bootstrap v3.0.0
jquery-1.9.1
DOCTYPE html

Thanks again for an awesome plugin!

[notflip]

I found a solution using the following as a success callback on my ajax call.

success: function(data){
    $("table#projects tbody").html(data);
    $('.footable').footable().trigger('footable_initialize');
}

[imanviii]

how footable parse the specified json?
could it be an array of json objects?

[RenegadeMaster]

using a combination of

$('.footable').trigger('footable_initialized');
$('.footable').trigger('footable_resize');
$('.footable').trigger('footable_redraw');

Always works for me, but the sorter breaks. Any idea how to sort of "restart" the footable sort plugin?

[twigmac]

Confirming that @RenegadeMaster 's solution worked for me, too. Luckily I didn't need the sorter.