javascript - 禁用 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">这样的东西例如对于 lenghtmenu - 然后使用 jQuerys wrap :

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