Datasheets with Bootstrap and ColVis

Question

jQuery DataTables with Bootstrap design seems to work fine, no problem. But when I try to use ColVis with it, it breaks everything.

I tried minimal CSS, different JavaScript files from ColVis that didn't fix it. Weird

However, what is my CSS / Javascript with screenshots that I used:

http://pastebin.com/F83sthP7

Any suggestion how to fix it?

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> 

Screenshots:

---

---

---

Answer 1

CAUSE

The Bootstrap add-in for jQuery DataTables requires dom , except for the default value of 'lfrtip' . Unfortunately, this is not documented anywhere, but can be detected by checking additional code .

Decision

Use the dom required for Bootstrap's Twitter-style (as shown in the additional source code) and modified so that the ColVis button displays correctly.

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

See this jsFiddle for code and demos.