jquery - 具有Bootstrap和ColVis的数据表

带有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>

屏幕截图：

最佳答案

原因


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。