如何使 jquery 数据 table 使用 bootstrap table 响应式 class？

Question

我有 jquery 数据table，我知道它有一个 "responsive" 插件，但我不像 bootstrap table-响应式 class.

我应该可以用这个 class 将我的 jquery 数据 table 包装在 div 中，但这似乎对我不起作用。我基本上希望 table 在太大时水平滚动。

我试过将 table 包裹在 div 中，但没有用。

我已经尝试设置从数据table生成的div的class，但似乎也没有任何效果。

对于那些不熟悉的人，bootstrap 响应式 tables 滚动（见此处）： http://getbootstrap.com/css/#tables-responsive

Jquery datatables 响应插件，将 table 折叠成 plus/minus （在某些情况下非常优雅，但不是我的） https://datatables.net/extensions/responsive/

Answer 1

尝试在 table 初始化后添加 <div class="table-responsive"></div> 容器，请参见下面的示例代码：

$('#example').DataTable({
    "initComplete": function(settings, json){
        $('#example').wrap('<div class="table-responsive"></div>');
    }
});

原因 <div class="table-responsive"> 不起作用，因为 <table> 必须是 <div class="table-responsive"> 的直接子级，但 DataTables 更改了层次结构并且样式不再适用。

或者，有一个 scrollX 选项似乎在做同样的事情。

$('#example').DataTable({
    'scrollX': true
});

请参阅 this JSFiddle 进行演示。

How to make a jquery datatable use bootstrap table-responsive class?