在DataTables

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

演示 - ＆gt;的 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');

如果您想要lenghtmenu等<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以获取代码和演示。