jquery - for - html5 center tag



Таблицы данных с Bootstrap и ColVis (1)

jQuery DataTables с дизайном Bootstrap, кажется, работает нормально, никаких проблем. Но когда я пытаюсь использовать ColVis с этим, это ломает все.

Я попробовал минимальный CSS, разные файлы JavaScript из ColVis, которые не исправили его. Weird.

Тем не менее, это мой 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>

Скриншоты:


ПРИЧИНА

Надстройка Bootstrap для jQuery DataTables требует параметра dom отличного от default 'lfrtip' . К сожалению, это не документировано нигде, но может быть обнаружено путем проверки исходного кода .

РЕШЕНИЕ

Используйте 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

См. Этот jsFiddle для кода и демонстрации.





datatables