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

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进行演示。