在 DataTables 中禁用 css 样式

Question

我正在尝试将 DataTables 表放入 Bootstrap 面板中。

我已尝试将选项 dom 设置为：

dom: '<"panel panel-default"<"panel-heading"lf>t<"panel-footer"ip>>',

元素被正确放置在应该的位置，但是DataTables对元素应用了很多样式，所以布局很丑。

我可以禁用 css 样式吗？比如DataTables把过滤和分页对齐在右边，好像是用position: absolute什么的。我宁愿使用 Bootstrap 的 <div class="row"><div class="col-md-6">.... 或只使用 <div class="pull-right">...</div>。

编辑

感谢您的回答

我尝试过禁用样式

.dataTables_length {
}

.dataTables_length label {
  float: none !important;
}

.dataTables_filter {
}

.dataTables_filter label {
  float: none !important;
  margin-bottom: 0 !important;
}

.dataTables_info {
  padding-top: 0 !important;
}

.dataTables_paginate {
  float: none !important;
}

.dataTables_paginate ul.pagination {
  margin: 0 !important;
}

并用

制作列

dom: '<"panel panel-default"<"panel-heading"<"row"<"col-md-6"l><"col-md-6 text-right"f>>>t<"panel-footer"<"row"<"col-md-6"i><"col-md-6 text-right"p>>>>',

它几乎可以工作，但我想我应该将col-md-6 作为类添加到现有的 div 元素中，而不是在 dom 选项中添加更多的 div 元素。

这真的是正确的做法吗？

Answer 1

它只是用于 CSS 类 - .dataTables_<context>，这里有一些 CSS 可供使用：

.dataTables_length {
    background-color: red;
}
.dataTables_filter {
    background-color: blue;
}
.dataTables_info {
    background-color: yellow;
}
.dataTables_paginate {
    background-color: green;
}

演示 -> http://jsfiddle.net/g860g5bm/

如果你想改变这些元素的类，那么你有 id 的方案 <id>_<context> ：

#example_length {
    background-color: red;
}
#example_filter {
    background-color: blue;
}
#example_info {
    background-color: yellow;
}
#example_paginate {
    background-color: green;
}

完全改变长度菜单的类：

$('#example_length').removeClass().addClass('col-md-6');

---

如果你想要像 <div class="row"><div class="col-md-6"> 这样的东西作为长度菜单 - 然后使用 jQuerys wrap ：

$('#example_length')
   .wrap($('<div>', { 'class' : 'row' }))
   .wrap($('<div>', { 'class' : 'col-md-6' }))

Answer 2

解决方案

Bootstrap 需要 dom 选项中的特定结构，有关详细信息，请参阅 Styling。

var table = $('#example').DataTable({
    "dom": '<"panel panel-default"<"panel-heading"<"row"<"col-md-6"l><"col-md-6 text-right"f>>>t<"panel-footer"<"row"<"col-md-6"i><"col-md-6 text-right"p>>>>'
});

DataTables 支持的样式库将覆盖dom 参数的默认值，并将其替换为适合其布局系统的值。例如，Bootstrap 集成利用了 Bootstrap 的网格布局。

"dom":
   "<'row'<'col-sm-6'l><'col-sm-6'f>>" +
   "<'row'<'col-sm-12'tr>>" +
   "<'row'<'col-sm-5'i><'col-sm-7'p>>"

演示

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