Question posted in 
I am using jQuery DataTables, I added select inputs ( bootstrap-select ) under the header table to filter my data.
When I used bootstrap selectpicker, the datatables was hidding the dropdown and the select couldn’t pop up. I used
.dataTables_scrollHead { overflow: visible !important; }
and it fixed the pop up, now the select options are not hidden by datatables but it messed up with the header. it’s now fixed and doesn’t move when scrolling horizontally even I specified "scrollX": true. Only the footer and body are scrolling on X axis.
Any suggestions please what is causing the issue ? Thank you very much.
$(document).ready(function() {
// clone tr
$('#liveTable thead tr').clone(true).appendTo( '#liveTable thead' );
// set id to the cloned tr
$('#liveTable thead tr:eq(1)').attr('id', 'selectFilter');
// add select to each th in the cloned tr
$('#liveTable thead tr:eq(1) th').each( function (i) {
$(this).html( '<select class="added"><option value="">All</option></select>' );
} );
var liveTable = $('#liveTable').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "https://api.npoint.io/49da61bee945ca8aa32a",
"columns": [
{"data": "COUNTRY_NAME"},
{"data": "COUNTRY_CODE"},
{"data": "TERRITORY"},
{"data": "MARKET"},
{"data": "REGION"},
{"data": "CustomerName"},
{"data": "STATUS"},
{"data": "OrderQty"},
{"data": "Crncy"},
{"data": "LocalPrice"},
{"data": "Dollarprice"},
{"data": "Europrice"},
{"data": "Poundprice"},
{"data": "ShipTo"},
{"data": "ShipToName"},
{"data": "ShipToHouseStreetNumber"},
{"data": "ShipToCity"},
{"data": "ShipToPostalCode"},
{"data": "ShipToRegion"},
{"data": "ShipToTelephone"},
{"data": "ShipToEmail"},
{"data": "ShipToCountry"}
],
"orderCellsTop": true,
"scroller": true,
"scrollY": 400,
"scrollX": true,
"scrollCollapse": true,
"paging": false,
"searching": false,
initComplete: function () {
var k = 0;
// loop through each select inside my cloned tr
$('#liveTable thead tr:eq(1) th .added').each(function() {
// get unique values in the current column
var unique = liveTable.columns( k ).data().eq( 0 ).unique().sort();
var option = '';
// loop through unique array to add all items as options
for (var i=0;i<unique.length;i++){
option += '<option value="'+ unique[i] + '">' + unique[i] + '</option>';
}
// append all options inside current select
$("tr:eq(1) th:eq(" + k + ") .added").append(option);
//apply bootstrap select plugin
$("tr:eq(1) th:eq(" + k + ") .added").selectpicker();
// increment k so that next select will check next column
k++;
});
}
} );
} );thead select {
width: 100%; }
.dataTables_scrollHead{
overflow: visible !important;
width: 100%;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/css/bootstrap-select.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.21/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.17/js/bootstrap-select.min.js"></script>
<table id="liveTable" class="table table-bordered" style="width:100%">
<thead>
<tr>
<th>COUNTRY_NAME</th>
<th>COUNTRY_CODE</th>
<th>TERRITORY</th>
<th>MARKET</th>
<th>REGION</th>
<th>CustomerName</th>
<th>STATUS</th>
<th>OrderQty</th>
<th>Crncy</th>
<th>LocalPrice</th>
<th>Dollarprice</th>
<th>Europrice</th>
<th>Poundprice</th>
<th>Ship To</th>
<th>Ship To Name</th>
<th>Ship To House/ Street Number</th>
<th>Ship To City</th>
<th>Ship To Postal Code</th>
<th>Ship To Region</th>
<th>Ship To Telephone</th>
<th>Ship To Email</th>
<th>Ship To Country</th>
</tr>
</thead>
<tfoot>
<tr>
<th>COUNTRY_NAME</th>
<th>COUNTRY_CODE</th>
<th>TERRITORY</th>
<th>MARKET</th>
<th>REGION</th>
<th>CustomerName</th>
<th>STATUS</th>
<th>OrderQty</th>
<th>Crncy</th>
<th>LocalPrice</th>
<th>Dollarprice</th>
<th>Europrice</th>
<th>Poundprice</th>
<th>Ship To</th>
<th>Ship To Name</th>
<th>Ship To House/ Street Number</th>
<th>Ship To City</th>
<th>Ship To Postal Code</th>
<th>Ship To Region</th>
<th>Ship To Telephone</th>
<th>Ship To Email</th>
<th>Ship To Country</th>
</tr>
</tfoot>
</table>
2
Answers
I found a solution i hope it will be useful for someone in future. i removed
I keep datatables css as it is and in bootstrap-select data-container="body". This is useful if the select element is inside an element with
overflow: hiddenso my select should be as belowI am added outer div for this table & class it table-responsive removed jQuery collapse X & Y scroll now it scroll with header