Footable 与 Angular.js 一起使用 [英] Footable along with Angular.js

问题描述

我正在尝试使用footable(，而不是每次 ng-repeat 执行时添加每一行，您可以等到 ng-repeat 完成，然后在父表本身上初始化 FooTable:

.directive('myDirective', function(){返回函数(范围，元素){var footableTable = element.parents('table');如果(！范围.$last){返回假；}if (!footableTable.hasClass('footable-loaded')) {footableTable.footable();}};})

这在具有多行的表上扩展得更好.

注意 element 自动是一个 jQlite/jQuery 对象，所以不再需要用 $() 语法包装它.

更新

AngularJS 的优势之一是双向数据绑定.要使 FooTable 数据与最新数据保持同步，您可以执行以下操作:

.directive('myDirective', function(){返回函数(范围，元素){var footableTable = element.parents('table');如果(！范围.$last){返回假；}scope.$evalAsync(function(){if (!footableTable.hasClass('footable-loaded')) {footableTable.footable();}footableTable.trigger('footable_initialized');footableTable.trigger('footable_resize');footableTable.data('footable').redraw();});};})

scope.$evalAsync 包装器在 DOM 准备好但在显示之前执行，防止数据闪烁.附加的 trigger 和 redraw 方法强制初始化的 FooTable 实例在数据更改时更新.

该指令保留了用户体验 - 任何 FooTable 排序、过滤或分页都保持原样 - 同时在数据更新时无缝加载数据.

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.

解决方案

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.

这篇关于Footable 与 Angular.js 一起使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！