使用过滤的 Ember 数据的 jQuery DataTable - 列宽不调整大小

Question

先介绍一些背景知识:

我有一个Ember组件，它使用Handlebars {{#each results as |result|}}{{/each}}来填充tbody元素，其中包含结果中的所有数据。

在这个表的上面，有一个开关，设置表是否应该显示所有的条目，还是只显示那些将isEnabled设置为true的条目。这个开关设置viewAll组件属性。当切换开关时，数据会正确更改，但是Datatable中的列会扩展到页面之外(如下所示)。

我已经尝试在viewAll属性上设置和观察者，以便每次它被更改时我都调用draw()。我试过打电话给resultsTable.columns.adjust().draw()，但无济于事。

有人知道发生了什么事吗?

作为参考，环境使用Bootstrap 3, Ember 2.6.0, Datatables 1.10.12和jQuery 2.2.4。

模板如下(表格存在于Bootstrap面板中):

<tbody>
    {{#each results as |result|}}
        <!--Ember truth-helpers used here-->
        {{#if (or (and (not viewAll) result.isEnabled) viewAll)}}
            <tr data-id={{result.id}}>
                <td>{{result.time}}</td>
                <td>{{result.a}}</td>
                <td>{{result.b}}</td>
                <td>{{result.c}}</td>
                <td>{{result.d}}</td>
                <td>{{result.e}}</td>
                <td>{{result.f}}</td>
                <td>{{result.g}}</td>
                <td>{{result.h}}</td>
            </tr>
        {{/if}}
    {{/each}}
</tbody>

下面是组件代码(在didInsertElement钩子中):

Ember.run.scheduleOnce('afterRender', this, function() {
    resultsTable = this.$("#tbl_results").DataTable(
        {   
            "responsive":true,
            "autoWidth": true,
            "select": true
        }
    );
});

和截图:显示行溢出的屏幕截图

任何建议都非常感谢。谢谢!

Answer 1

所以，就像现在一样，所有的评论都被排除了，我已经找到了这个解决方案(正如我的一个评论所述)。

我在results集合上放置了一个观察者，viewAll属性通过toggle更新:

updater : Ember.observer("results.@each", "viewAll", function(){
    recreateTable(this.get("viewAll"), this.get("results"));
}),

调用:(销毁表并重新创建它。非常低效，但结果通常使我们相当小，这就是我现在坚持的)

function recreateTable(viewAll, results){
    let data = null;
    if(resultsTable) {
        resultsTable.clear(); // Clear first to avoid dupe data
        resultsTable.destroy();
    }
    if (viewAll) {
        data = results;
    } else {
        data = results.filterBy("isEnabled", true);
    }
    let dataArray = [];
    data.forEach( function(item){
        dataArray.push([
                "<time class='timeago' datetime='" + item.get("time") + "'>" + item.get('time') + "</time>",
                item.get("a"),
                item.get("b"),
                item.get("c"),
                item.get("d"),
                item.get("e"),
                item.get("f"),
                item.get("g"),
                item.get("h")
            ]
        );
    });
    resultsTable = Ember.$("#tbl_results").DataTable(
        {   
            "aaData": dataArray,
            "responsive":true,
            "autoWidth": true,
            "select": true
        }
    );
    Ember.$("time.timeago").timeago();
}

对于那些好奇的人来说，timeago是一个简洁的jQuery小插件，它将时间格式化为"3分钟前"，而不是蹩脚的时间戳。(即使SO也使用它)。