Estoy siguiente un ejemplo para generar un datatable con un campo search en cada una de las cabeceras de la tabla, de forma que cuando actualice la página almacene las busquedas (con statesave).
Ahora mismo funciona, pero los cuadros de busqueda estan en la parte inferior de la tabla y los quiero cambiar a la cabecera, debajo del nombre de la columna.
Os dejo el código:
Esta es mi tabla de prueba:
<table id="prueba" class="display" width="100%">
<thead>
<tr>
<th>Campo1</th>
<th>Campo2</th>
<th>Campo3</th>
<th>Campo4</th>
<th>Campo5</th>
<th>Campo6</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Campo1</th>
<th>Campo2</th>
<th>Campo3</th>
<th>Campo4</th>
<th>Campo5</th>
<th>Campo6</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Prueba1</td>
<td>Prueba1</td>
<td>Prueba1</td>
<td>Prueba1</td>
<td>Prueba1</td>
<td>Prueba1</td>
</tr>
<tr>
<td>Prueba2</td>
<td>Prueba2</td>
<td>Prueba2</td>
<td>Prueba2</td>
<td>Prueba2</td>
<td>Prueba2</td>
</tr>
<tr>
<td>Prueba22</td>
<td>Prueba3</td>
<td>Prueba4</td>
<td>Prueba5</td>
<td>Prueba3</td>
<td>Prueba4</td>
</tr>
<tr>
<td>Prueba5</td>
<td>Prueba6</td>
<td>Prueba7</td>
<td>Prueba8</td>
<td>Prueba9</td>
<td>Prueba2</td>
</tr>
</tbody>
</table>
Este es el Jquery:
<script>
//Codigo JQuery donde definimos todo el funcionamiento de refresco de página, filtros y datatable
$(document).ready(function() {
// Setup - add a text input to each footer cell
$('#prueba tfoot th').each( function () {
var title = $('#prueba tfoot th').eq( $(this).index() ).text();
$(this).html( '<input type="text" placeholder="Search '+title+'" />' );
} );
// DataTable
var table = $('#prueba').DataTable( {
bFilter: true,
bAutoWidth: true,
sDom:"ltipr",
bInfo: false,
ordering: false,
orderCellsTop: false,
bPaginate: false,
fixedHeader: false,
stateSave: true
} );
// Restore state
var state = table.state.loaded();
if ( state ) {
table.columns().eq( 0 ).each( function ( colIdx ) {
var colSearch = state.columns[colIdx].search;
if ( colSearch.search ) {
$( 'input', table.column( colIdx ).footer() ).val( colSearch.search );
}
} );
table.draw();
}
// Apply the search
table.columns().eq( 0 ).each( function ( colIdx ) {
$( 'input', table.column( colIdx ).footer() ).on( 'keyup change', function () {
table
.column( colIdx )
.search( this.value )
.draw();
} );
} );
} );
</script>
¿Alguien me puede echar una mano? He probado todo lo que se me ha ocurrido, pero no hay manera... mil gracias!