jquery - 使用 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

CAUSE

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

SOLUTION

使用dom Twitter Bootstrap 样式所必需的(如附加源代码中所示)并进行了修改，以便 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用于代码和演示。