Custom filtering - search by range-DataTables
I'm using one of the functions of DataTables which is search by range, but this type of search only accepts integer numbers. I would like to make this search accept sample date formats 10/10/2019. I don't know where it starts https://datatables.net/examples/plug-ins/range_filtering.html
$('#min, #max').keyup(function () {
table.draw();
});
$.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[0]) || 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;
}
);
1
Author: Darlei Fernando Zillmer, 2019-10-17
3 answers
You can use the same concept of parseInt that you already use for age, but with different format, in the following example, the date of datepicker will be formatted to a pattern yyyymmdd (note the function parseDateValue), See in the complete example:
function parseDateValue(rawDate) {
var dateArray = rawDate.split("/");
var parsedDate = dateArray[2] + dateArray[1] + dateArray[0];
return parsedDate;
}
$(document).ready(function() {
$.fn.dataTable.ext.search.push(
function(settings, data, dataIndex) {
var dateStart = parseDateValue($("#min").val());
var dateEnd = parseDateValue($("#max").val());
var evalDate = parseDateValue(data[4]);
if ((isNaN(dateStart)) || (isNaN(dateEnd))) {
return true;
}
if (evalDate >= dateStart && evalDate <= dateEnd) {
return true;
} else {
return false;
}
}
);
$("#min").datepicker({
dateFormat: 'dd/mm/yy',
onSelect: function() {
table.draw();
},
changeMonth: true,
changeYear: true
});
$("#max").datepicker({
dateFormat: 'dd/mm/yy',
onSelect: function() {
table.draw();
},
changeMonth: true,
changeYear: true
});
var table = $('#example').DataTable({
"language": {
"url": "//cdn.datatables.net/plug-ins/1.10.20/i18n/Portuguese-Brasil.json"
}
} );
$('#min, #max').change(function() {
table.draw();
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<table border="0" cellspacing="5" cellpadding="5">
<tbody>
<tr>
<td>Data Inicial:</td>
<td><input name="min" id="min" type="text" autocomplete="off"></td>
</tr>
<tr>
<td>Data Final:</td>
<td><input name="max" id="max" type="text" autocomplete="off"></td>
</tr>
</tbody>
</table>
<table width="100%" class="display" id="example" cellspacing="0">
<thead>
<tr>
<th>Nome</th>
<th>Profissão</th>
<th>Localidade</th>
<th>Idade</th>
<th>Data de Inicio</th>
<th>Salario</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Nome</th>
<th>Profissão</th>
<th>Localidade</th>
<th>Idade</th>
<th>Data de Inicio</th>
<th>Salario</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Teste</td>
<td>Arquiteto</td>
<td>São Paulo</td>
<td>61</td>
<td>25/04/2011</td>
<td>R$3208</td>
</tr>
<tr>
<td>Teste</td>
<td>Arquiteto</td>
<td>São Paulo</td>
<td>61</td>
<td>25/04/2012</td>
<td>R$3208</td>
</tr>
<tr>
<td>Teste</td>
<td>Arquiteto</td>
<td>São Paulo</td>
<td>61</td>
<td>25/04/2013</td>
<td>R$3208</td>
</tr>
<tr>
<td>Teste</td>
<td>Arquiteto</td>
<td>São Paulo</td>
<td>61</td>
<td>25/04/2014</td>
<td>R$3208</td>
</tr>
<tr>
<td>Teste</td>
<td>Arquiteto</td>
<td>São Paulo</td>
<td>61</td>
<td>25/04/2015</td>
<td>R$3208</td>
</tr>
<tr>
<td>Teste</td>
<td>Arquiteto</td>
<td>São Paulo</td>
<td>61</td>
<td>25/04/2016</td>
<td>R$3208</td>
</tr>
<tr>
<td>Teste</td>
<td>Arquiteto</td>
<td>São Paulo</td>
<td>61</td>
<td>25/04/2017</td>
<td>R$3208</td>
</tr>
<tr>
<td>Teste</td>
<td>Arquiteto</td>
<td>São Paulo</td>
<td>61</td>
<td>25/04/2018</td>
<td>R$3208</td>
</tr>
<tr>
<td>Teste</td>
<td>Arquiteto</td>
<td>São Paulo</td>
<td>61</td>
<td>25/04/2019</td>
<td>R$3208</td>
</tr>
<tr>
<td>Teste</td>
<td>Arquiteto</td>
<td>São Paulo</td>
<td>61</td>
<td>25/06/2019</td>
<td>R$3208</td>
</tr>
<tr>
<td>Teste</td>
<td>Arquiteto</td>
<td>São Paulo</td>
<td>61</td>
<td>25/07/2019</td>
<td>R$3208</td>
</tr>
<tr>
<td>Teste</td>
<td>Arquiteto</td>
<td>São Paulo</td>
<td>61</td>
<td>25/08/2019</td>
<td>R$3208</td>
</tr>
<tr>
<td>Teste</td>
<td>Arquiteto</td>
<td>São Paulo</td>
<td>61</td>
<td>25/10/2019</td>
<td>R$3208</td>
</tr>
<tr>
<td>Teste</td>
<td>Arquiteto</td>
<td>São Paulo</td>
<td>61</td>
<td>25/11/2019</td>
<td>R$3208</td>
</tr>
</tbody>
</table>Code no GitHub for future reference.
3
Author: Darlei Fernando Zillmer, 2019-11-07 00:13:38
For ease you can use Moment.js: https://momentjs.com /
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
const inicio = moment("01/10/2019","DD/MM/YYYY");
const fim = moment("01/11/2019","DD/MM/YYYY");
var data= moment(data[posicao],"DD/MM/YYYY");
if (data >= inicio && data <= fim) {
return true;
} else {
return false;
}
}
);
2
Author: Maik Vinicius, 2019-11-02 00:32:49
You can do this way tb:
$(document).ready(function() {
jQuery.extend(jQuery.fn.dataTableExt.oSort, {
"extract-date-pre": function(value) {
var date = $(value, 'span')[0].innerHTML;
date = date.split('/');
return Date.parse(date[1] + '/' + date[0] + '/' + date[2])
},
"extract-date-asc": function(a, b) {
return ((a < b) ? -1 : ((a > b) ? 1 : 0));
},
"extract-date-desc": function(a, b) {
return ((a < b) ? 1 : ((a > b) ? -1 : 0));
}
});
$('#leadtable').dataTable({
language: {
url: '//cdn.datatables.net/plug-ins/1.10.12/i18n/Hebrew.json'
},
columnDefs: [{
type: 'extract-date',
targets: [0]
}
]
}); 2
Author: Bruno Ferreira, 2019-11-06 15:00:10