带有 Bootstrap 和 ColVis 的数据表

Question

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

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

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

http://pastebin.com/F83sthP7

有什么建议可以解决吗？

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

原因

用于 jQuery DataTables 的 Bootstrap 插件需要 dom 选项，而不是默认的 'lfrtip'。不幸的是，这在任何地方都没有记录，但可以通过检查 add-on source code 来发现。

解决方案

使用 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;
}

演示

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