jQuery數據表默認折疊

Question

我的表默認加載如下：

我必須調整瀏覽器的大小以使標題擴展：

然后單擊標題之一（排序）以展開所有行：

是否缺少某些內容，但我無法弄清默認崩潰的原因。

js +把手文件：

 (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最常見問題的解決方案，請參閱jQuery DataTables – Bootstrap選項卡的列寬問題 。