使用 Bootstrap 和 ColVis 的数据表

Question

jQuery 采用 Bootstrap 设计的数据表似乎工作正常，没有问题。但是当我尝试将 ColVis 与它一起使用时，它破坏了一切。

我尝试了来自 ColVis 的最小 CSS、不同的 JavaScript 文件，但没有修复它。奇怪。

但是，这是我的 CSS/Javascript 我使用的屏幕截图：

有什么解决方法的建议吗？

CSS:

<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.css">
<link href="//cdn.datatables.net/colvis/1.1.0/css/dataTables.colVis.css" rel="stylesheet">

JavaScript:

<script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="//cdn.datatables.net/plug-ins/1.10.7/integration/bootstrap/3/dataTables.bootstrap.js"></script>
<script type="text/javascript" language="javascript" src="https://www.datatables.net/release-datatables/extensions/ColVis/js/dataTables.colVis.js"></script>

<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
   $('#example').DataTable( {
      dom: 'C<"clear">lfrtip'
   } );
} );
</script>

截图：

Answer 1

CAUSE

Bootstrap jQuery DataTables 的附加组件需要 dom option other than default 'lfrtip'. Unfortunately this is not documented anywhere but can be discovered by inspecting add-on source code.

SOLUTION

使用 Twitter Bootstrap 风格所必需的 dom 并进行修改，以便 ColVis 按钮正确显示。

JavaScript

$(document).ready(function (){
    var table = $('#example').DataTable({
      dom:
        "<'row'<'col-sm-6'l><'col-sm-3'f><'col-sm-3 text-right'C>>" +
        "<'row'<'col-sm-12'tr>>" +
        "<'row'<'col-sm-5'i><'col-sm-7'p>>",        
   });
});

CSS:

div.ColVis, button.ColVis_Button {
  float:none;
}

DEMO

有关代码和演示，请参阅 this jsFiddle。

使用 Bootstrap 和 ColVis 的数据表

DataTables with Bootstrap and ColVis

css

jquery

datatables

twitter-bootstrap