Scrollx hide search inputs - datatable

Question

I have a little problem.
When adding my table the element "scrollX": true, the search entries disappear.
CODE:
JAVASCRIPT
function parametrosTabla6(tabla) {
var tabla2 = $(tabla).DataTable({
'paging': true,
'searching': true,
'ordering': true,
'orderCellsTop': true,
'order': [
[0, 'desc']
],
"scrollX": true,
'columnDefs': [
{
'responsivePriority': 1,
'targets': 0
},
{
'responsivePriority': 2,
'targets': -1
},
{ "className": "dt-center", "targets": "_all" }
],
'responsive': true,
});
var len = $('#datos thead tr:eq(1) th').length;
$('#datos tfoot:eq(0) th').each(function (i, e) {
var title = $(this).text();
if (i == len - 1) { } else {
$(this).html('<input style="width:100%" class="form-control" data-column="' + (i + 1) + '" type="text" placeholder="' + title + '" />');
}
$('input', this).on('keyup change', function () {
if (tabla2.column(i).search() !== this.value) {
tabla2.column(i).search(this.value).draw();
}
});
});
}
HTML/CSS/PHP
<table id="datos" class="table table-hover display drtresponsive nowrap" width="100%">
<thead>
<th>Nº Pedido</th>
<th>Cliente</th>
<th>Nº Telefono (fijo-movil)</th>
<th>Fecha Venta</th>
<th>Correo Enviado</th>
<th>Estado Pago</th>
<th>Expedicion</th>
<th>Fecha Envio</th>
<th>Fecha Entrega</th>
<th>Recibido</th>
<th>Anulado</th>
<th>Usuario Venta</th>
<th>Ultimo usuario editado</th>
<th>Acciones Disponibles</th>
</thead>
<tfoot style="display: table-header-group">
<tr>
<th>Nº Pedido</th>
<th>Cliente</th>
<th>Nº Telefono (fijo-movil)</th>
<th>Fecha Venta</th>
<th>Correo Enviado</th>
<th>Estado Pago</th>
<th>Expedicion</th>
<th>Fecha Envio</th>
<th>Fecha Entrega</th>
<th>Recibido</th>
<th>Anulado</th>
<th>Usuario Venta</th>
<th>Ultimo usuario editado</th>
<th>Acciones Disponibles</th>
</tr>
</tfoot>
<tbody>
<?php
if (isset($result)) {
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
switch ($row['recibido']) {
case 0:
$row['recibido'] = "NO";
break;
case 1:
$row['recibido'] = "SI";
break;
}
switch ($row['correo_confirmacion']) {
case 0:
$row['correo_confirmacion'] = "NO";
break;
case 1:
$row['correo_confirmacion'] = "SI";
break;
}
switch ($row['factura']) {
case 0:
$row['factura'] = "NO";
break;
case 1:
$row['factura'] = "SI";
break;
}
switch ($row['anulado']) {
case 0:
$row['anulado'] = "NO";
break;
case 1:
$row['anulado'] = "SI";
break;
}
require 'mod/tabla_facturas.php';
}
} else {
echo "<tr>0 results</td>";
}
} else {
echo "<td colspan='100%'>0 results</td>";
}
?>
</tbody>
</table>

Answer 1

Here is the answer.
You have two options:
(The one I have chosen) Put the overflow-x:auto in parent div.
Clone the thead and add the inputs.
var len = $('#datos thead tr:eq(1) th').length;
$('#datos thead tr').clone(true).appendTo('#datos thead');
$('#datos thead tr:eq(1) th').each(function (i, e) {
var title = $(this).text();
if (i == len - 1) {
} else {
$(this).html('<input style="width:100%" type="text" placeholder="' + title + '" />');
}
$('input', this).on('keyup change', function () {
if (table.column(i).search() !== this.value) {
table
.column(i)
.search(this.value)
.draw();
}
});
});
Add the orderCellsTop option to the datatable.