数据表响应 - 搜索栏（引导程序）

Question

我已经开始在项目中实现Datatables。  我的项目基于Bootstrap 3。  我已经在datatables下载页面上构建了一个包含必要文件的包，并根据文档创建了一个简单的数据表。一切正常，但我的响应能力有问题。看看下面的截图：

如你所见。搜索栏有问题。

该表格包含以下HTML：

<table width="100%" class="table table-striped table-bordered dt-responsive table-condensed table-hover" id="event_history" cellspacing="0"> .......

该表具有以下JS：

var table = $('#event_history').DataTable({
 responsive: true,
 colReorder: true,
 lengthChange: true,
 "order": [[ 0, "desc" ]],
 });

也许有人可以帮我解决这个问题。

谢谢！

Answer 1

当表占据整页宽度时，DataTables中的控件使用Bootstrap样式很好地包装，请参阅this example。

但是，我认为您在不占用整页宽度的面板中显示您的表格，这会阻止应用col-规则，如this example所示。您可以使用dom选项的特殊值来根据预期的容器大小为一个特定表配置列布局。

例如：

var table = $('#example').DataTable({
   responsive: true,
   dom: 
      "<'row text-center'<'col-xs-12'l><'col-xs-12'f>>" +
      "<'row'<'col-xs-12'tr>>" +
      "<'row text-center'<'col-xs-12'i><'col-xs-12'p>>"
});

请参阅this example以获取代码和演示。