如何使用水平滾動引導數據表的自定義過濾器？

Question

我正在使用水平可滾動引導程序數據表並創建了一個自定義過濾器。

當我選擇我的選擇框的特定值時，我想僅顯示具有該特定類的列。這是一切運作良好，我唯一的問題是：

選定的列不適合視覺上我的窗口，這意味着，他們有我的表與所有列相同的寬度，即使結果是隻有一個柱。他們還種偏移。我在這裏創造一個例子：

$('.data-table').DataTable({ 
 
    "scrollX": true, 
 
    initComplete: function() { 
 
    $('<div style="float:right;min-width:200px"><div style="float:right;"><select name="productgroup" class="productgroup form-control select2" style="width: 100%;"><option value="all">All</option><option value="name">Name</option><option value="position">Position</option><option value="office">Office</option><option value="age">Age</option><option value="startdate">Startdate</option><option value="salary">Salary</option></select></div><div style="float:right;margin:4px 10px 10px">Filter</div></div>').appendTo($("#DataTables_Table_0_filter")); 
 
    $("select").on("change", function() { 
 
     var product = $(this).val(); 
 
     $(".all").hide(); 
 
     $("." + product).show(); 
 
    }); 
 
    } 
 
});

div.dataTables_wrapper { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://almsaeedstudio.com/themes/AdminLTE/plugins/datatables/dataTables.bootstrap.css"> 
 

 
<script src="https://almsaeedstudio.com/themes/AdminLTE/plugins/jQuery/jquery-2.2.3.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 
 
<script src="https://almsaeedstudio.com/themes/AdminLTE/plugins/datatables/dataTables.bootstrap.min.js"></script> 
 
<table class="data-table table table-bordered table-striped"> 
 
    <thead> 
 
    <tr> 
 
     <th class="all name">Name</th> 
 
     <th class="all position">Position 1</th> 
 
     <th class="all position">Position 2</th> 
 
     <th class="all">Age</th> 
 
     <th class="all">Start date</th> 
 
     <th class="all">Salary</th> 
 
     <th class="all">Name</th> 
 
     <th class="all">Something</th> 
 
     <th class="all">Something</th> 
 
     <th class="all">Age</th> 
 
     <th class="all">Start date</th> 
 
     <th class="all">Salary</th> 
 
     <th class="all">Name</th> 
 
     <th class="all">Something</th> 
 
     <th class="all">Something</th> 
 
     <th class="all">Age</th> 
 
     <th class="all">Start date</th> 
 
     <th class="all">Salary</th> 
 
     <th class="all">Something</th> 
 
     <th class="all">Something</th> 
 
     <th class="all">Something else</th> 
 
     <th class="all">Age</th> 
 
     <th class="all">Start date</th> 
 
     <th class="all">Salary</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td class="all name">Tiger Nixon</td> 
 
     <td class="all position">System Architect</td> 
 
     <td class="all position">Edinburgh</td> 
 
     <td class="all">61</td> 
 
     <td class="all">2011/04/25</td> 
 
     <td class="all">$320,800</td> 
 
     <td class="all">Tiger Nixon</td> 
 
     <td class="all">System Architect</td> 
 
     <td class="all">Edinburgh</td> 
 
     <td class="all">61</td> 
 
     <td class="all">2011/04/25</td> 
 
     <td class="all">$320,800</td> 
 
     <td class="all">Tiger Nixon</td> 
 
     <td class="all">System Architect</td> 
 
     <td class="all">Edinburgh</td> 
 
     <td class="all">61</td> 
 
     <td class="all">2011/04/25</td> 
 
     <td class="all">$320,800</td> 
 
     <td class="all">Tiger Nixon</td> 
 
     <td class="all">System Architect</td> 
 
     <td class="all">Edinburgh</td> 
 
     <td class="all">61</td> 
 
     <td class="all">2011/04/25</td> 
 
     <td class="all">$320,800</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="all name">Garrett Winters</td> 
 
     <td class="all position">Accountant</td> 
 
     <td class="all position">Tokyo</td> 
 
     <td class="all">63</td> 
 
     <td class="all">2011/07/25</td> 
 
     <td class="all">$170,750</td> 
 
     <td class="all">Tiger Nixon</td> 
 
     <td class="all">System Architect</td> 
 
     <td class="all">Edinburgh</td> 
 
     <td class="all">61</td> 
 
     <td class="all">2011/04/25</td> 
 
     <td class="all">$320,800</td> 
 
     <td class="all">Tiger Nixon</td> 
 
     <td class="all">System Architect</td> 
 
     <td class="all">Edinburgh</td> 
 
     <td class="all">61</td> 
 
     <td class="all">2011/04/25</td> 
 
     <td class="all">$320,800</td> 
 
     <td class="all">Tiger Nixon</td> 
 
     <td class="all">System Architect</td> 
 
     <td class="all">Edinburgh</td> 
 
     <td class="all">61</td> 
 
     <td class="all">2011/04/25</td> 
 
     <td class="all">$320,800</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="all name">Ashton Cox</td> 
 
     <td class="all position">Junior Technical Author</td> 
 
     <td class="all position">San Francisco</td> 
 
     <td class="all">66</td> 
 
     <td class="all">2009/01/12</td> 
 
     <td class="all">$86,000</td> 
 
     <td class="all">Tiger Nixon</td> 
 
     <td class="all">System Architect</td> 
 
     <td class="all">Edinburgh</td> 
 
     <td class="all">61</td> 
 
     <td class="all">2011/04/25</td> 
 
     <td class="all">$320,800</td> 
 
     <td class="all">Tiger Nixon</td> 
 
     <td class="all">System Architect</td> 
 
     <td class="all">Edinburgh</td> 
 
     <td class="all">61</td> 
 
     <td class="all">2011/04/25</td> 
 
     <td class="all">$320,800</td> 
 
     <td class="all">Tiger Nixon</td> 
 
     <td class="all">System Architect</td> 
 
     <td class="all">Edinburgh</td> 
 
     <td class="all">Edinburgh</td> 
 
     <td class="all">Edinburgh</td> 
 
     <td class="all">61</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 1

有在你的代碼很多不好的做法的。讓我指出他們

• 你必須在所有的tbody的td要素類名稱 - 類的標題就足夠了。（你會發現爲什麼在我下面的代碼）
• 要附加的下拉表中initComplete回調到動態的插件('#DataTables_Table_0_filter')，這不是由插件作者推薦的方法創建一個element。 - 如果您想操縱表格UI，您必須使用提供的插件dom選項。
• 您正在手動將所有標題和td單元格隱藏在更改事件的正文中。這在頁面再次出現問題時會改變顯示長度，因爲插件不知道此更改，並且會按照之前的配置重新繪製表格 - 您需要使用插件提供的方法來操作表格。column.visible()，可以傳遞到columns() api details
• 也有是在你的代碼已經是一個錯誤，這錯誤，如果你改變顯示長度，你可以看到的參數 - 再次，這是因爲你的方法是使用插入。 （下面的示例修復了它）

因此，給出這些信息後，我已將您的代碼更改爲最佳方式。

var yourTableObj = $('.data-table').DataTable({ 
 
"dom": "<'row'<'col-sm-4'l><'col-sm-4'f><'col-sm-4 customFilterHolder'>>" + 
 
"<'row'<'col-sm-12'tr>>" + 
 
"<'row'<'col-sm-5'i><'col-sm-7'p>>", 
 
"scrollX": true,  
 
    initComplete: function(){ 
 
     $(".customFilterHolder").html('<div style="float:right;min-width:200px"><div style="float:right;"><select name="productgroup" class="productgroup form-control select2" style="width: 100%;"><option value="all">All</option><option value="name">Name</option><option value="position">Position</option><option value="office">Office</option><option value="age">Age</option><option value="startdate">Startdate</option><option value="salary">Salary</option></select></div><div style="float:right;margin:4px 10px 10px">Filter</div></div>');  
 

 
     $('.productgroup').on('change',function(){ 
 
      yourTableObj.columns().visible(true); //reset table to show all columns 
 
      yourTableObj.columns(':not(.'+$(this).val()+')').visible(false); // now hide unwanted columns. 
 
     // the reset is important because if you dont the table will work the present state of the table. 
 
     });  
 
    } 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://almsaeedstudio.com/themes/AdminLTE/plugins/datatables/dataTables.bootstrap.css"> 
 

 
<script src="https://almsaeedstudio.com/themes/AdminLTE/plugins/jQuery/jquery-2.2.3.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 
 
<script src="https://almsaeedstudio.com/themes/AdminLTE/plugins/datatables/dataTables.bootstrap.min.js"></script> 
 

 
<table class="data-table table table-bordered table-striped"> 
 
    <thead> 
 
    <tr> 
 
     <th class="all name">Name</th> 
 
     <th class="all position">Position 1</th> 
 
     <th class="all position">Position 2</th> 
 
     <th class="all">Age</th> 
 
     <th class="all">Start date</th> 
 
     <th class="all">Salary</th> 
 
     <th class="all">Name</th> 
 
     <th class="all">Something</th> 
 
     <th class="all">Something</th> 
 
     <th class="all">Age</th> 
 
     <th class="all">Start date</th> 
 
     <th class="all">Salary</th> 
 
     <th class="all">Name</th> 
 
     <th class="all">Something</th> 
 
     <th class="all">Something</th> 
 
     <th class="all">Age</th> 
 
     <th class="all">Start date</th> 
 
     <th class="all">Salary</th> 
 
     <th class="all">Something</th> 
 
     <th class="all">Something</th> 
 
     <th class="all">Something else</th> 
 
     <th class="all">Age</th> 
 
     <th class="all">Start date</th> 
 
     <th class="all">Salary</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>Tiger Nixon</td> 
 
     <td>System Architect</td> 
 
     <td>Edinburgh</td> 
 
     <td>61</td> 
 
     <td>2011/04/25</td> 
 
     <td>$320,800</td> 
 
     <td>Tiger Nixon</td> 
 
     <td>System Architect</td> 
 
     <td>Edinburgh</td> 
 
     <td>61</td> 
 
     <td>2011/04/25</td> 
 
     <td>$320,800</td> 
 
     <td>Tiger Nixon</td> 
 
     <td>System Architect</td> 
 
     <td>Edinburgh</td> 
 
     <td>61</td> 
 
     <td>2011/04/25</td> 
 
     <td>$320,800</td> 
 
     <td>Tiger Nixon</td> 
 
     <td>System Architect</td> 
 
     <td>Edinburgh</td> 
 
     <td>61</td> 
 
     <td>2011/04/25</td> 
 
     <td>$320,800</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Garrett Winters</td> 
 
     <td>Accountant</td> 
 
     <td>Tokyo</td> 
 
     <td>63</td> 
 
     <td>2011/07/25</td> 
 
     <td>$170,750</td> 
 
     <td>Tiger Nixon</td> 
 
     <td>System Architect</td> 
 
     <td>Edinburgh</td> 
 
     <td>61</td> 
 
     <td>2011/04/25</td> 
 
     <td>$320,800</td> 
 
     <td>Tiger Nixon</td> 
 
     <td>System Architect</td> 
 
     <td>Edinburgh</td> 
 
     <td>61</td> 
 
     <td>2011/04/25</td> 
 
     <td>$320,800</td> 
 
     <td>Tiger Nixon</td> 
 
     <td>System Architect</td> 
 
     <td>Edinburgh</td> 
 
     <td>61</td> 
 
     <td>2011/04/25</td> 
 
     <td>$320,800</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Ashton Cox</td> 
 
     <td>Junior Technical Author</td> 
 
     <td>San Francisco</td> 
 
     <td>66</td> 
 
     <td>2009/01/12</td> 
 
     <td>$86,000</td> 
 
     <td>Tiger Nixon</td> 
 
     <td>System Architect</td> 
 
     <td>Edinburgh</td> 
 
     <td>61</td> 
 
     <td>2011/04/25</td> 
 
     <td>$320,800</td> 
 
     <td>Tiger Nixon</td> 
 
     <td>System Architect</td> 
 
     <td>Edinburgh</td> 
 
     <td>61</td> 
 
     <td>2011/04/25</td> 
 
     <td>$320,800</td> 
 
     <td>Tiger Nixon</td> 
 
     <td>System Architect</td> 
 
     <td>Edinburgh</td> 
 
     <td>Edinburgh</td> 
 
     <td>Edinburgh</td> 
 
     <td>61</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

您可以使用columns.adjust()雖然我不知道這是理想的結果，但它確實調整相應的列。

$('.data-table').DataTable({ 
 
    "scrollX": true, 
 
    initComplete: function(settings) { 
 
    $('<div style="float:right;min-width:200px"><div style="float:right;"><select name="productgroup" class="productgroup form-control select2" style="width: 100%;"><option value="all">All</option><option value="name">Name</option><option value="position">Position</option><option value="office">Office</option><option value="age">Age</option><option value="startdate">Startdate</option><option value="salary">Salary</option></select></div><div style="float:right;margin:4px 10px 10px">Filter</div></div>').appendTo($("#DataTables_Table_0_filter")); 
 
    $("select").on("change", function() { 
 
     var product = $(this).val(); 
 
     $(".all").hide(); 
 
     $("." + product).show(); 
 
     var api = new $.fn.dataTable.Api(settings); 
 
     api.columns.adjust().draw(); 
 
    }); 
 

 
    } 
 
});

div.dataTables_wrapper { 
 
    width: 100%; 
 
    margin: 0 auto; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<link rel="stylesheet" href="https://almsaeedstudio.com/themes/AdminLTE/plugins/datatables/dataTables.bootstrap.css"> 
 

 
<script src="https://almsaeedstudio.com/themes/AdminLTE/plugins/jQuery/jquery-2.2.3.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 
 
<script src="https://almsaeedstudio.com/themes/AdminLTE/plugins/datatables/dataTables.bootstrap.min.js"></script> 
 

 
<table class="data-table table table-bordered table-striped"> 
 
    <thead> 
 
    <tr> 
 
     <th class="all name">Name</th> 
 
     <th class="all position">Position 1</th> 
 
     <th class="all position">Position 2</th> 
 
     <th class="all">Age</th> 
 
     <th class="all">Start date</th> 
 
     <th class="all">Salary</th> 
 
     <th class="all">Name</th> 
 
     <th class="all">Something</th> 
 
     <th class="all">Something</th> 
 
     <th class="all">Age</th> 
 
     <th class="all">Start date</th> 
 
     <th class="all">Salary</th> 
 
     <th class="all">Name</th> 
 
     <th class="all">Something</th> 
 
     <th class="all">Something</th> 
 
     <th class="all">Age</th> 
 
     <th class="all">Start date</th> 
 
     <th class="all">Salary</th> 
 
     <th class="all">Something</th> 
 
     <th class="all">Something</th> 
 
     <th class="all">Something else</th> 
 
     <th class="all">Age</th> 
 
     <th class="all">Start date</th> 
 
     <th class="all">Salary</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td class="all name">Tiger Nixon</td> 
 
     <td class="all position">System Architect</td> 
 
     <td class="all position">Edinburgh</td> 
 
     <td class="all">61</td> 
 
     <td class="all">2011/04/25</td> 
 
     <td class="all">$320,800</td> 
 
     <td class="all">Tiger Nixon</td> 
 
     <td class="all">System Architect</td> 
 
     <td class="all">Edinburgh</td> 
 
     <td class="all">61</td> 
 
     <td class="all">2011/04/25</td> 
 
     <td class="all">$320,800</td> 
 
     <td class="all">Tiger Nixon</td> 
 
     <td class="all">System Architect</td> 
 
     <td class="all">Edinburgh</td> 
 
     <td class="all">61</td> 
 
     <td class="all">2011/04/25</td> 
 
     <td class="all">$320,800</td> 
 
     <td class="all">Tiger Nixon</td> 
 
     <td class="all">System Architect</td> 
 
     <td class="all">Edinburgh</td> 
 
     <td class="all">61</td> 
 
     <td class="all">2011/04/25</td> 
 
     <td class="all">$320,800</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="all name">Garrett Winters</td> 
 
     <td class="all position">Accountant</td> 
 
     <td class="all position">Tokyo</td> 
 
     <td class="all">63</td> 
 
     <td class="all">2011/07/25</td> 
 
     <td class="all">$170,750</td> 
 
     <td class="all">Tiger Nixon</td> 
 
     <td class="all">System Architect</td> 
 
     <td class="all">Edinburgh</td> 
 
     <td class="all">61</td> 
 
     <td class="all">2011/04/25</td> 
 
     <td class="all">$320,800</td> 
 
     <td class="all">Tiger Nixon</td> 
 
     <td class="all">System Architect</td> 
 
     <td class="all">Edinburgh</td> 
 
     <td class="all">61</td> 
 
     <td class="all">2011/04/25</td> 
 
     <td class="all">$320,800</td> 
 
     <td class="all">Tiger Nixon</td> 
 
     <td class="all">System Architect</td> 
 
     <td class="all">Edinburgh</td> 
 
     <td class="all">61</td> 
 
     <td class="all">2011/04/25</td> 
 
     <td class="all">$320,800</td> 
 
    </tr> 
 
    <tr> 
 
     <td class="all name">Ashton Cox</td> 
 
     <td class="all position">Junior Technical Author</td> 
 
     <td class="all position">San Francisco</td> 
 
     <td class="all">66</td> 
 
     <td class="all">2009/01/12</td> 
 
     <td class="all">$86,000</td> 
 
     <td class="all">Tiger Nixon</td> 
 
     <td class="all">System Architect</td> 
 
     <td class="all">Edinburgh</td> 
 
     <td class="all">61</td> 
 
     <td class="all">2011/04/25</td> 
 
     <td class="all">$320,800</td> 
 
     <td class="all">Tiger Nixon</td> 
 
     <td class="all">System Architect</td> 
 
     <td class="all">Edinburgh</td> 
 
     <td class="all">61</td> 
 
     <td class="all">2011/04/25</td> 
 
     <td class="all">$320,800</td> 
 
     <td class="all">Tiger Nixon</td> 
 
     <td class="all">System Architect</td> 
 
     <td class="all">Edinburgh</td> 
 
     <td class="all">Edinburgh</td> 
 
     <td class="all">Edinburgh</td> 
 
     <td class="all">61</td> 
 
    </tr> 
 
    </tbody> 
 
</table>