Hi,
I create a server side table.
I add search on every column.
this is how I add the search
var table = $('#canzoni_player').DataTable( {
"processing": true,
"serverSide": true,
"autoWidth": false,
"ajax": "scripts/tabella_playlist.php",
"lengthMenu": [[18, 50,100, 250, 500, -1], [18, 50,100, 250, 500, "Tutti"]],
"language": {
"url": "//cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Italian.json"
},
initComplete: function() {
var api = this.api();
// Apply the search
api.columns([0, 1, 3, 4]).every(function() {
var that = this;
$('input', this.footer()).on('keyup change', function() {
if (that.search() !== this.value) {
that
.search(this.value)
.draw();
}
});
});
}
So I want to add a range filter only in one column
- I add the text input
<tbody><tr>
<td>Minimo BPM</td>
<td><input type="text" id="min" name="min"></td>
</tr>
<tr>
<td>Massimo BPM</td>
<td><input type="text" id="max" name="max"></td>
</tr>
</tbody>
I add the extended search for the column 3
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var min = parseInt( $('#min').val(), 10 );
var max = parseInt( $('#max').val(), 10 );
var age = parseFloat( data[3] ) || 0; // use data for the age column
if ( ( isNaN( min ) && isNaN( max ) ) ||
( isNaN( min ) && age <= max ) ||
( min <= age && isNaN( max ) ) ||
( min <= age && age <= max ) )
{
return true;
}
return false;
}
);
So I have to add the code to initialize the search
$('#min, #max').keyup( function() {
table.columns( [3] )
table.search(this.value);
table.draw();
} );
I add this after
initComplete: function() {
var api = this.api();
but it doesn't work. It search on the column 1,2 and not a range