Jquery 具有引导和ColVis的数据表

jQuery数据表采用自举设计，似乎工作正常，并没有问题。 但当我试着用ColVis的时候，它破坏了一切

我尝试了最低限度的CSS，不同的JavaScript文件从ColVis没有修复它。奇怪

但是，这是我使用的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">

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

JavaScript:

<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">

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

$（文档）.ready（函数（）{
$（'#示例'）。数据表（{
dom:“Clfrtip”
} );
} );

屏幕截图：

<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">

<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的引导加载项需要默认值以外的选项

'lfrtip'

。不幸的是，这没有记录在任何地方，但可以通过检查发现

解决方案

使用Twitter引导样式所必需的（如附加源代码中所示），并进行修改，以便正确显示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>>",        
   });
});

演示

---

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

@Neoon，更正代码以在较小屏幕上获得更好的外观。