Footable along with Angular.js

Hemal picture Hemal · Nov 27, 2013 · Viewed 11.7k times · Source

I m trying to use footable(http://themergency.com/footable-demo/responsive-container.htm) along with angular.js.

enter image description here

As the window size is reduced, Column 3, 4, 5 are only shown when plus sign is clicked.

Angular.js provides filtering capabilities, so when I put some search string like below:

enter image description here

Rows in the table are filtered.

Now the problem is when I try to remove this search string as below:

enter image description here

all the rows are again show, but the UI is distorted.

I tried to get a callback in angular.js using

$scope.$watch('searchStringID', function() {
$('#tableId').trigger('footable_initialize');
}

but did not work, if anybody can suggested how to address this issue.

Thanks.

Answer

Chris Laskey picture Chris Laskey · Aug 1, 2014

To add to Daniel Stucki's answer, instead of adding each individual row each time ng-repeat executes, you can wait until ng-repeat is finished and then initialize FooTable on the parent table itself:

.directive('myDirective', function(){
  return function(scope, element){
    var footableTable = element.parents('table');

    if( !scope.$last ) {
      return false;
    }

    if (! footableTable.hasClass('footable-loaded')) {
      footableTable.footable();
    }
  };
})

This scales much better on tables with many rows.

Note element is automatically a jQlite/jQuery object, so there is no longer a need to wrap it in $() syntax.

Update

One of the advantages of AngularJS is the two-way data binding. To keep FooTable data in sync with the latest data, you can do something like this:

.directive('myDirective', function(){
  return function(scope, element){
    var footableTable = element.parents('table');


    if( !scope.$last ) {
        return false;
    }

    scope.$evalAsync(function(){

        if (! footableTable.hasClass('footable-loaded')) {
            footableTable.footable();
        }

        footableTable.trigger('footable_initialized');
        footableTable.trigger('footable_resize');
        footableTable.data('footable').redraw();

    });
  };
})

The scope.$evalAsync wrapper executes once the DOM is ready but before it is displayed, preventing data flickering. The additional trigger and redraw method forces the initialized FooTable instance to update when the data changes.

This directive preserves the user experience - any FooTable sorting, filtering, or pagination stays remains in place - while loading data seamlessly whenever it is updated.