I am using jquery dataTables and I want to add a filter combo for a specific field in the location after "Search" ... is this possible? I already saw examples that you can add comboxes in the footer, under each column of the table and filter in that way, but aesthetically I do not like it and also, I just need a filter combo.
I'm not very good with jQuery but you can add a combobox on top of your table and launch an event when you change it.
$(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();
});
});
}
});
});
Edit : I added it to the height of the search field
I'll leave you the jsFiddle