小贝子编程

表头不会与 jQuery DataTable 中的正文一起水平滚动



我正在使用jQuery DataTables，我在标题表下添加了选择输入(bootstrap-select(来过滤我的数据。

当我使用引导selectpicker时，数据表隐藏了下拉列表，并且无法弹出选择。我用了

.dataTables_scrollHead { overflow: visible !important; }

它修复了弹出窗口，现在选择选项没有被数据表隐藏，但它弄乱了标题。 它现在是固定的，即使我指定了"scrollX": true，在水平滚动时也不会移动.只有页脚和正文在 X 轴上滚动。

请提出任何建议，是什么导致了问题？谢谢。

$(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>

我找到了一个解决方案，我希望它对将来的某人有用。 我删除了

.dataTables_scrollHead{
overflow: visible !important;
width: 100%;
}

我保持数据表 css 原样，并在引导选择数据容器="正文">中。如果选择元素位于具有overflow: hidden的元素内，这很有用，所以我的选择应该如下所示

<select class="added" data-container="body"><option value="">All</option></select>

我被添加为此表的外部div和类它表响应删除了jQuery折叠X和Y滚动现在它滚动与标题

$(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,  
"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>
<div class="table-responsive">
<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></div>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium