Custom Filtering - Range Search - Datatables

Asked

Viewed 608 times

1

I am using one of the functions of Datatables that is interval searching, but this type of search only accepts integer numbers. I would like to make this survey 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;
    }
);
javascript momentjs

  • Excuse the question, but want to filter some information of a comic using date period ? I could not understand very well your need.

3 answers

3


You can use the same concept of parseInt that already uses for age, but with different format, in the following example, the date of the datepicker will be formatted for a pattern yyyymmdd (note the function parseDateValue), see in the full 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 in the Github for future reference.

  • 1

    Solved my problem, thanks! I will only apply in the Semantic ui box instead of the datepicker.

2

You can do this way too:

$(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

To make it easier 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;
        }
    }
);

Browser other questions tagged javascript momentjs

You are not signed in. Login or sign up in order to post.