Footable along with Angular.js

Question

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

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:

Rows in the table are filtered.

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

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 1

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.

Answer 2

I stumbled upon the same question. After finally writing an own solution to get a table with hidden columns, I managed to solve your problem (assuming your using ng-repeat to build your table).

html:

<div ng-init="friends =     [{name:'data11', phone:'data12'},
                         {name:'data21', phone:'data22'},
                         {name:'data31', phone:'data32'},
                         {name:'data41', phone:'data42'},
                         {name:'data51', phone:'data52'}]"></div>

Search: <input ng-model="searchText">
<table id="searchTextResults" class="footable">
<thead>
  <tr><th>Column1</th><th>Column2</th><th data-hide="phone">Column3</th><th data-hide='phone'>Column4</th><th data-hide='phone'>Column5</th></tr>
</thead>

<tbody>
  <tr ng-repeat="friend in friends | filter:searchText" my-directive>
    <td>{{friend.name}}</td>
    <td>{{friend.phone}}</td>
    <td>{{friend.phone}}</td>
    <td>{{friend.phone}}</td>
    <td>{{friend.phone}}</td>
  </tr>
</tbody>
</table>

Controller:

.directive('myDirective', function(){
  return function(scope, element)
  {

    if(scope.$last && !$('.footable').hasClass('footable-loaded')) {
            $('.footable').footable();
    }

    var footableObject = $('.footable').data('footable');
    if (footableObject  !== undefined) {
            footableObject.appendRow($(element));
    }

  };})

Hope this helps.

Answer 3

Just in case anyone happens to stumble across this in the future, there's an angular directive available for FooTable here: https://github.com/ziscloud/angular-footable.