jQuery的数据表崩溃默认情况下，在默认情况下是这样

我的表负载： enter image description here jQuery的数据表崩溃默认情况下，在默认情况下是这样

我必须调整浏览器，以使头部扩大： enter image description here

，然后点击其中一个标题（排序）展开所有行： enter image description here

是否有某些缺失，但我找不出为什么崩溃是默认的原因。

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" }}

来源

2015-07-10 M老立

没有代码意味着没有帮助的朋友。然而，有一点想到的是函数event.preventDefault（）。也许试试？ –

添加你的JavaScript，所以我们可以看到你是如何配置你的表。 –

对不起，只是粘贴了一些片段，它不是一个工作的片段，因为它依赖于其他平台将它们粘在一起。 –

原因

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

SOLUTION

您需要一旦你的表变得可见运行下面的函数。

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

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

呼叫它时，如果初始化时隐藏（例如，在一个标签），或者当数据显著改变表变得可见。

LINKS

的解决方案见jQuery DataTables – Column width issues with Bootstrap tabs与jQuery的数据表中最常见的问题，当表最初是隐藏的。

来源

2015-07-11 04:10:25

jQuery的数据表崩溃默认情况下，在默认情况下是这样

回答

相关问题