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代碼和示範。