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

【问题标题】：DataTable and Bootstrap 4.2.1 formating Show entries and SearchDataTable 和 Bootstrap 4.2.1 格式化显示条目和搜索
【发布时间】：2019-02-27 22:23:53
【问题描述】：

我无法像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();
});

这是我的结果。

我希望它看起来像这样。

【问题讨论】：

标签： css datatable datatables bootstrap-4

【解决方案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>>"});

【讨论】：

您好，威尔默，感谢您的建议。可悲的是，它删除了整个标题。还有其他建议吗？

【解决方案2】：

看起来像 <label> 元素样式与 {width: 50px; display: block} 这样的东西搞砸了。您可能需要检查在 dataTables.bootstrap4.min.css 之后加载的样式表是否会覆盖 <label> 样式，或者您可能在代码中做了一些事情，例如 $('label').css({'width': '50px'; 'display': 'block'})。

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

【讨论】：

感谢您的回复 ygorbunkov，今晚我会尝试，让您了解情况。再次感谢！

【解决方案3】：

您正在使用默认的 datatables.net CSS。使用专门用于 Bootstrap 4 的那个就可以了。

【讨论】：