jQuery数据表默认崩溃

Question

我的表默认加载如下：

我必须调整浏览器的大小才能使标题展开：

然后单击其中一个标题（排序）以展开所有行：

是否有遗漏，但我无法找出崩溃是默认的原因。

js + handlebars文件：

(function() {
    "use strict";

    var MyCollection = Backbone.Collection.extend({

        url: /some/path
    });

    var MyRowView = Reporting.RowView.extend({
        template: _.template($("#row-template").html())
    });

    var MyTableView = Reporting.TableView.extend({
        el: $(".report"),
        header: _.template($("#header-template").html()),
        table: _.template($( "#table-template").html()),
        RowView: MyRowView
    });

    var mycollection = new MyCollection();
    
    var tableView = new MyTableView({
        collection: mycollection
    });
    
    mycollection.fetch();
    
})();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/template" id="header-template">
    <tr>
        <th>{{i18n "Assignment"}}</th>
        <th>{{i18n "Status"}}</th>
        <th>{{i18n "Success"}}</th>
        <th>{{i18n "Score"}}</th>
        <th>{{i18n "Comments"}}</th>
        <th>{{i18n "Rating"}}</th>
    </tr>
</script>

<script type="text/template" id="row-template">
    <td><%= resourceName %></td>
    <td><%= completionStatus %></td>
    <td><%= successStatus %></td>
    <td><%= score %></td>
    <td><%= noComments %></td>
    <td><%= noRatings %></td>
</script>

<script type="text/template" id="table-template">
    <table id="table-id" width="100%" class="table table-striped table-hover table-bordered">
        <thead>
        </thead>
        <tbody>
        </tbody>
    </table>
</script>

<div class="report">
    {{include this resourceType="/path/to/bootstraptable"}}
</div>
{{includeClientLib categories="category.of.js.file" }}

Answer 1

<强>原因

最有可能发生这种情况是因为在DataTables初始化时您的表被隐藏了。但是，我在JavaScript代码中没有看到DataTables初始化代码。

<强>解

一旦表格可见，您需要运行以下功能。

$('#table-id').DataTable().columns.adjust();

从手册中的columns.adjust()页面：

  

如果表在初始化时隐藏（例如在选项卡中）或数据发生显着变化时隐藏，则调用该表。

<强>链接

在最初隐藏表时，请参阅jQuery DataTables – Column width issues with Bootstrap tabs以获取jQuery DataTables最常见问题的解决方案。