如何使 jquery 数据表使用引导表响应类？

Question

我有 jquery 数据表，我知道它有一个“响应式”插件，但我不喜欢引导表响应类的行为。

我应该能够使用这个类将我的 jquery 数据表包装在一个 div 中，但这似乎对我不起作用。我基本上希望表格太大时水平滚动。

我尝试将表格包装在 div 中，但没有成功。

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

对于那些不熟悉的人，引导响应表滚动（请参阅此处）： http://getbootstrap.com/css/#tables-responsive

Jquery datatables 响应式插件，将表格折叠成加号/减号（在某些情况下非常优雅，但不是我的） https://datatables.net/extensions/responsive/

Answer 1

尝试在表初始化后添加<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 进行演示。