Datatables Responsiveness - Searchbar（bootstrap）

Question

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

正如你看到的。搜索栏有问题。

该表具有以下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

当表占​​据整页宽度时，使用引导式样式很好地控制DataTable中的控件，请参阅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代码和示范。