Estoy usando jquery dataTables y quiero agregar un combo de filtrado para un campo especifico en la ubicación a continuacion de "Search"...es posible esto?. Ya ví ejemplos que se pueden agregar comboxes en el footer, debajo de cada columna de la tabla y filtrar de esa forma, pero estéticamente no me gusta y ademas, solo necesito un combo de filtrado.
1 respuesta
No soy muy bueno con jQuery pero puedes agregar un combobox arriba de tu tabla y lanzar un evento al momento de cambiarlo.
$(document).ready(function() {
var table = $('#tablaDetalle').DataTable({
"bPaginate": false,
"bLengthChange": false,
"bFilter": true,
"bInfo": false,
"bAutoWidth": false,
initComplete: function() {
var div = $('#tablaDetalle_wrapper');
div.find("#tablaDetalle_filter").prepend("<label for='idDepartamento'>Departamento:</label><select id='idDepartamento' name='idDepartamento' class='form-control' required><option>Seleccione uno...</option><option value='1'> FRITURAS</option><option value='2'>REFRESCOS</option></select>");
this.api().column(0).each(function() {
var column = this;
console.log(column.data());
$('#idDepartamento').on('change', function() {
var val = $(this).val();
column.search(val ? '^' + val + '$' : '', true, false)
.draw();
});
});
}
});
});
Edición: Lo agregué a la altura del campo de búsqueda
Te dejo el jsFiddle
-
Funciona correctamente y es una opción que ya manejaba. El inconveniente (estético) es que el combo está fuera del dataTable. yo quiero que saber si se puede dejar a la derecha o izquierda del "Search" y a la misma altura Commented el 20 oct. 2016 a las 18:43
-
Listo, lo modifiqué y lo puse a la altura del campo de búsqueda... Saludos Commented el 20 oct. 2016 a las 19:04
-
Excelente @ed-garcia !...eso es lo que queria! Commented el 20 oct. 2016 a las 19:53
-
Aun esta abierta la pregunta para ayudar? @EdGarcía Commented el 14 dic. 2016 a las 18:45
-
@PabloContreras AFAIK el usuario encontró en la respuesta lo que buscaba, pues así lo señaló en el comentario. Commented el 15 dic. 2016 a las 19:47