0

我正在使用具有分页功能的 Footable V3（版本 3.0.1），并希望为我的用户提供动态修改每页项目的能力。

我尝试了两种方法来实现这一点，但都没有奏效：

1）我尝试在填充表格后在代码中传递新的页面大小。

$('#availableResults').footable(
    {
        "paging": 
            "size": count
        }
    });

这导致表格立即格式不正确，并在控制台中出现以下错误：

FooTable: unhandled error thrown during initialization. Error: No columns supplied.(…)(anonymous function) @ footable.js:1705

2）接下来，我尝试在表格已经填充后即时更改页面大小的表格属性值。

angular.element( '#availableResults').attr( 'data-paging-size', count );

这没有效果。

我知道在footable V2 中可以更改页面大小属性，然后触发表格重绘以完成每页更改的动态项目。我知道 V3 是完全重写的，但也许 V3 有一个我不知道的类似机制。我通读了下面的所有 V3 文档，但没有运气。

http://fooplugins.github.io/FooTable/docs/components/paging.html

http://fooplugins.github.io/FooTable/docs/jsdocs/index.html

任何帮助表示赞赏。

4

2 回答 2

1

您可以使用“分页和大小”功能。

$('.table').footable({ // define all of table with 'table' class as footable
  "paging": { 
    "size": 5 // set the default page size to 5 rows
  }
});

或者您可以轻松使用此属性。

<table class="table" data-paging-size="5">
    ...
</table>

有关Footable Pagination的更多信息，您可以查看： https ://fooplugins.github.io/FooTable/docs/components/paging.html

于 2016-02-21T09:06:16.797 回答
0

您需要重新初始化表并在对象参数中传入列和行数据。

FooTable.init('#availableResults', {
    paging: {size: 5}, columns: columns, rows: rows
});

行和列在父范围内并填充了表所需的数据

于 2016-10-31T18:56:44.483 回答