DataTable和Bootstrap 4.2.1格式显示条目和搜索

Question

我无法像DataTables网站上的示例那样显示格式。

<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />    
<link href="assets/plugins/DataTables-1.10.18/dataTables.bootstrap4.min.css"/>
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/plugins/DataTables-1.10.18/jquery.dataTables.min.js"></script>
<script src="assets/plugins/DataTables-1.10.18/dataTables.bootstrap4.min.js"></script>

$(function($) {
  $('#myTbl').DataTable();
});

这是我的结果。

我希望它看起来像这样。

Answer 1

可能您需要dom

示例：

$('#myTbl').DataTable({dom: "<'row gridheader'<'col-sm-12 col-md-12'B>>"
    + "<'row'<'col-sm-12'tr>>"
    + "<'row gridfooter'<'col-sm-12 col-md-5'i><'col-sm-12 col-md-7'p>>"});

Answer 2

似乎<label>元素样式已与{width: 50px; display: block}类似。您可能需要检查在dataTables.bootstrap4.min.css之后加载的样式表是否可以覆盖<label>的样式，或者是否在代码中做了某些操作，例如$('label').css({'width': '50px'; 'display': 'block'})。

因此，您可能需要在样式表或代码中限制“标签”选择器的范围。或者，如果是CSS，请更改样式表的加载顺序，以免默认样式被覆盖。

Answer 3

您正在使用默认的datatables.net CSS。专门为Bootstrap 4使用一个，这样就可以正常工作。