javascript - 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()手册中的页面:

Call it when the table becomes visible if hidden when initialised (for example in a tab) or when the data changes significantly.

链接

参见 jQuery DataTables – Column width issues with Bootstrap tabs用于解决表最初隐藏时 jQuery DataTables 最常见的问题。