twitter-bootstrap-3 – 如何使jquery数据表使用bootstrap表响应类？

2023年1月10日 228次阅读

我有
jquery数据表,我知道它有一个“响应”插件,但我不喜欢这个行为和bootstrap表响应类一样多.

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

我试过在div中包装表,但是没有用.

我已经尝试设置从数据表生成的div的类,这似乎也没有任何影响.

对于那些不熟悉的人,bootstrap响应表滚动(见这里)：
http://getbootstrap.com/css/#tables-responsive

Jquery数据表响应式插件,将表折叠为正/负(在某些情况下非常优雅,但不是我的)
https://datatables.net/extensions/responsive/

最佳答案 尝试添加< 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.

点赞