Removing A Row

It is recommended to use the built-in removeRow function when deleting rows from a FooTable. The reasons are:

• A detail row, that may or may not be generated when a breakpoint is fired, is also deleted
• The correct FooTable events are fired which triggers a redraw. This also forces the sorting, filtering and pagination add-ons to play nicely.

Simply pass the row object into the removeRow function. (The row object can be a jQuery object or not)

$('table').footable().on('click', '.row-delete', function(e) {
    e.preventDefault();
    //get the footable object
    var footable = $('table').data('footable');

    //get the row we are wanting to delete
    var row = $(this).parents('tr:first');

    //delete the row
    footable.removeRow(row);
});

Adding A Row

For similar reasons as above, it is recommended to use the built-in appendRow function for adding rows to the FooTable:

$('.add-row').click(function(e) {
    e.preventDefault();

    //get the footable object
    var footable = $('table').data('footable');

    //build up the row we are wanting to add
    var newRow = '<tr><td>Isidra</td><td><a href="#">Boudreaux</a></td><td>Traffic Court Referee</td><td data-value="78025368997">22 Jun 1972</td><td data-value="1"><span class="status-metro status-active" title="Active">Active</span></td><td><a class="row-delete" href="#"><span class="glyphicon glyphicon-remove"></span></a></td></tr>';

    //add it
    footable.appendRow(newRow);
});