Issue in footable while adding dynamic data

Question

I need a little help in jQuery Mobile Foo Table. I am adding data dynamically in a table.

HTML:

    <table id="tblSRNDetails" class="footable">
        <thead>
            <tr>
                <th data-class="expand">SRN</th>
                <th >Failure Date</th>  
                <th >Complaint Report Date</th>                 
                <th>Promised Date</th>  
                <th >Customer Name</th>
                <th >Log Time</th>
                <th >Create FSR</th>    
                <th  data-hide="phone,tablet">Days Open</th>        
                <th  data-hide="phone,tablet">SRN Allocated Time</th>   
                <th  data-hide="phone,tablet"> SRN Status</th>  
                <th  data-hide="phone,tablet"> ESN Number</th>  
                <th  data-hide="phone,tablet"> Request Type</th>    
                <th  data-hide="phone,tablet">Service Request Details</th>                          
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

js code:

$("#page-id").live('pagebeforeshow', function() {
    console.log("Page before show");
    $("#tblSRNDetails > tbody tr").remove();
    for (var indx = 0; indx < 2; indx++ )
    {
        $("#tblSRNDetails > tbody").append("<tr>"+
        "<td>Name</td>"+
        "<td>failureDate</td>"+
        "<td>complaintReportDate</td>"+
        "<td>promisedDate</td>"+
        "<td>custName</td>"+
        "<td><a href='#'><b>Log Time</b></a></td>"+
        "<td><b>Create FSR</b></td>"+
        "<td>daysOpen</td>"+
        "<td>allocatedTime</td>"+
        "<td>srn_status</td>"+
        "<td>ESNNumber</td>"+
        "<td>requestType</td>"+
        "<td>customerComplaint</td>"+
        "</tr>");   
    }
    $('#tblSRNDetails').footable();
});

With this FooTable is applied properly when opened for first time. If I click on home page button and go back, and come on that page again, the FooTable is not applied properly.

Screenshot:

So issues I am facing at that time include:

1. Hidden fields are shown. (Means Footable is not applied): This issue gets resolved after changing orientation in device for twice.

2. First field doesn't include Data Expand button anymore (Means Footable is not applied):

I think the issue is because I am removing the old rows and adding new ones. I tried without giving remove call. At that time, the old rows were being displayed properly. Newly appended fields were having problems as shown in screenshot.

Can someone help me with this?

P.S: I am rendering this in android webview. And same problem is reproduced in browser, too.

Daph

Can I know the reason of downvote, please? I have tried my best for searching on google before posting as a question – Disbud

Which version of jquery an JQM are you using? .live is depreciated and replaced with .on. Also, try adding this after appending items $('[data-role=page]').trigger('create'). – Frizzly

@Frizzly jQM version 1.2.0. .on didn't work. And I tried adding $('[data-role=page]').trigger('create') after appending data. But that didn't change anything. – Disbud

.on should work if you're using jquery 1.8.3 and above. Have you added trigger('create') after $('#tblSRNDetails').footable();? Try refresh or pagecreate instead of create. – Frizzly

Yes, @Frizzly . I added trigger after $('#tblSRNDetails').footable(); And try to refresh and pagecreate both. Still same output. Is there any way of removing footable / refreshing it? – Disbud

Answer 1

Foo table was created as a jQuery plugin, and as such was never intended to work with jQuery Mobile. It is simply just another plugin not working correctly with jQuery mobile. Foo table don't know how to handle jQuery Mobile page switching.

Only way you can make it work is if you dynamically create whole table each time you visit that page. In any other case Foo table will not work because page is already there with enhanced table markup. That is why every jQuery Mobile widget has a function with a refresh property.

Here's a working example: http://jsfiddle.net/Gajotres/PjmEL/

One last thing, if this is not a good solution for you you should switch to jQuery Mobile implementation of dynamic table.

$(document).on('pageshow', '#index', function(){  
    $("#tblSRNDetails").remove();
    $('<table>').attr({'id':'tblSRNDetails','class':'footable'}).appendTo('[data-role="content"]');
        $("#tblSRNDetails").append(
            "<thead><tr>"+
            "<th data-class='expand'>SRN</th>"+
            "<th >Failure Date</th>"+
            "<th >Complaint Report Date</th>"+
            "<th>Promised Date</th>"+
            "<th >Customer Name</th>"+
            "<th >Log Time</th>"+
            "<th >Create FSR</th>"+
            "<th  data-hide='phone,tablet'>Days Open</th>"+
            "<th  data-hide='phone,tablet'>SRN Allocated Time</th>"+
            "<th  data-hide='phone,tablet'> SRN Status</th>"+
            "<th  data-hide='phone,tablet'> ESN Number</th>"+
            "<th  data-hide='phone,tablet'> Request Type</th>"+
            "<th  data-hide='phone,tablet'>Service Request Details</th>"+
            "</tr></thead>");  
    for (var indx = 0; indx < 2; indx++ )
    {
        $("#tblSRNDetails").append(
            "<tbody><tr>"+
            "<td>Name</td>"+
            "<td>failureDate</td>"+
            "<td>complaintReportDate</td>"+
            "<td>promisedDate</td>"+
            "<td>custName</td>"+
            "<td><a href='#'><b>Log Time</b></a></td>"+
            "<td><b>Create FSR</b></td>"+
            "<td>daysOpen</td>"+
            "<td>allocatedTime</td>"+
            "<td>srn_status</td>"+
            "<td>ESNNumber</td>"+
            "<td>requestType</td>"+
            "<td>customerComplaint</td>"+
            "</tr></tbody>");   
    }
    $('#tblSRNDetails').footable();
});

$(document).on('pagebeforeshow', '#second', function(){       

});

Misteach

Thanks. I made the changes in Foo Table implementation and its working now. +1. – Disbud

Answer 2

I had the same issue in my web application i was using this in datatables.net on callback I added redraw function of footable and it work perfectly fine.

$('table').trigger('footable_redraw');

Pump

Answer 3

'Footable' works great with 'jQuery Mobile'. I will explain its usage with my code snippets.

Footable initialization,

function initFootable() {
    $(function () {
        $('.footable').footable({ //.footable is my class for table
            breakpoints: {
                phone: 480, //Breakpoint width for phones
                tablet: 1024 //Breakpoint width for tablets
            }
        });
    });
}

I am using jQuery AJAX call to get new table data and add them to the table using templating method. I am using handlebars.js for templating. (Remember, this templating method is not compulsory. You can use your own methods to append new rows to your table.)

So, after you have updated new data to the table, you need to trigger footable for re-initialization. Here is the code snippet,

function updateFootable() {
    var paramTable = $('.footable');
    paramTable.footable();
    paramTable.trigger('footable_initialize'); //Reinitialize
    paramTable.trigger('footable_redraw'); //Redraw the table
    paramTable.trigger('footable_resize'); //Resize the table
}

All triggers here are not necessary. Check and confirm calling which trigger is just enough for you, as according to the issue you are having with re-initialization/redrawing/resizing.

That's it, you won't be having any problem with using footable with jQuery Mobile now.

IMPORTANT: However you must be careful while calling updateFootable(), if the div containing the table, or the page containing the table is hidden, then the table won't be responsively resized. You must make sure that the table is visible while you are calling for its update.

Links:

Here is the doc for footable triggers - http://fooplugins.com/footable/demos/triggers.htm#docs

Make sure to go through footable docs - http://fooplugins.com/footable-demos/

Trichloromethane