javascript - inmovilizar - datatables print title

Aplicar la búsqueda de columnas a jQuery DataTable actual

Question

Saludo a todos mis codificadores.

Tengo un jQuery DataTable actual en funcionamiento que funciona correctamente:

 var $dataTable = $(''#example1'').DataTable({
"ajax": ''api/tableSearch.php'',
"iDisplayLength": 25,
"order": [[ 6, "desc" ]],
"scrollY": 600,
"scrollX": true,
"bDestroy": true,
"columnDefs": [{
"targets": 0,
"render": function (data, type, full, meta){
return ''<a class="editLink" href="#">Edit</a><a class="deleteLink" href="#">Del</a>'':
}
}]
});

Como se dijo, el código anterior funciona en consecuencia ... el filtro de búsqueda funciona, la clasificación funciona, todo funciona.

Lo que me gustaría hacer es agregar una búsqueda en columna a esta tabla de datos, como se muestra aquí:
https://www.datatables.net/release-datatables/examples/api/multi_filter_select.html

Intenté agregar el código del enlace de arriba a mi código actual, de la siguiente manera:

 var $dataTable = $(''#example1'').DataTable({
"ajax": ''api/tableSearch.php'',
"iDisplayLength": 25,
"order": [[ 6, "desc" ]],
"scrollY": 600,
"scrollX": true,
"bDestroy": true,
"columnDefs": [{
"targets": 0,
"render": function (data, type, full, meta){
return ''<a class="editLink" href="#">Edit</a><a class="deleteLink" href="#">Del</a>'':
}
}], // begin here
initComplete: function(){
this.api().columns().every(function(){
var column = this;
var select = $(''<select><option value=""></option></select>'')
.appendTo( $(column.footer()).empty() )
.on( ''change'', function () {
var val = $.fn.dataTable.util.escapeRegex(
$(this).val()
);
column
.search( val ? ''^''+val+''$'' : '''', true, false )
.draw();
} );
column.data().unique().sort().each( function ( d, j ) {
select.append( ''<option value="''+d+''">''+d+''</option>'' )
} );
} );
}
} );
}); 

No he recibido ningún error, y DataTable aún se carga, pero la búsqueda de columna no está allí.

Estoy usando jQuery-2.1.3.min, por lo que debería estar actualizado.

¿Alguien ve lo que estoy haciendo mal y qué puedo hacer para corregir este problema?

Answer 1

Agrega un <tfoot> a tu mesa. La expresión que hace referencia a column.footer() espera que exista.