带有Bootstrap和ColVis的DataTable

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加载项需要除std::cout << "\033[F" << "\033[2K" << std::flush;之外的dom选项。不幸的是，这在任何地方都没有记录，但可以通过检查add-on source code来发现。

  

<强>解

使用Twitter Bootstrap样式所需的dom（如附加源代码中所示）并进行修改，以便正确显示ColVis按钮。

<强>的JavaScript

'lfrtip'

<强> CSS ：

$(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>>",        
   });
});

  

<强>样本

请参阅this jsFiddle以获取代码和演示。