Help needed for advanced filters and sorting

alzambo

I’m trying to set up a table with advanced filtering but I’m stuck setting it altogether using code snippets found in the forum, because I don’t really understand how this works.

You can access my script at this link:
http://alzambo.net/alex/fatturazioneTest.php

This is DataTables relevant code:

$(document).ready(function() {

    // Aggiunge campi input
    $('#tabellaFatturazione thead th').each( function () {
        var title = $(this).text();
        $(this).html(formatInput(title));
    } );

    function formatInput(title) {
       // This function output proper field html
    }
 
    var table = $('#tabellaFatturazione').DataTable( {
        "stateSave": true,
        "ordering": false,
        "orderFixed": [ 1, 'desc' ],
        "autoWidth": false,
        "data": datiTabella,
        "columns": [
            {"data": "protocollo"},
            {"data": "dataIncarico",
                "type": "date-uk",
                "render": function(data){
                    return moment(data).isValid() ? moment(data).format("DD/MM/YYYY") : null;
                }
            },
            {"data": "dataRestituzione",
                "type": "date-uk",
                "render": function(data){
                    return moment(data).isValid() ? moment(data).format("DD/MM/YYYY") : null;
                }
            },
            {"data": "nomeIncaricato"},
            {"data": "parcellaIncaricato"},
            {"data": "nomeCompagnia"},
            {"data": "parcellaCompagnia"},
            {
                "data": "numeroFattura",
                "render": function ( data, type, full, meta ) {
                    valore = data ? data : "";
                    return '<input class="form-control numeroFattura" name="numeroFattura" style="width: 100%;" data-id="'+full.id+'" value="' + valore + '"  />';
                }
            },
            {
                "data": "dataFattura",
                "type": "date-uk",
                "render": function(data, type, full, meta){
                    valore = moment(data).isValid() ? moment(data).format("DD/MM/YYYY") : "";
                    return '<input class="form-control dataFattura datepicker" name="dataFattura" style="width: 100%;" data-id="'+full.id+'" value="' + valore + '" data-mask data-inputmask="\'alias\': \'date\'" />';
                }
            }
        ],
        initComplete: function() {
            // Ricerca in tempo reale
            this.api().columns().every( function () {

                var that = this;

                // trigger per tutti i campi tranne data incarico e data fattura
                $( 'input.filtro', this.header())
                    .not('input[name=daDataIncarico], input[name=aDataIncarico]')
                    .not('input[name=daDataFattura],input[name=aDataFattura]')
                    .not('input[name=daDataRestituzione],input[name=aDataRestituzione]')
                    .on( 'keyup change', function () {
                        if (that.search() !== this.value) {
                            that.search( this.value ).draw();
                        }
                    } );
            });
        }
    });


    // ricerca date range
    $.fn.dataTable.ext.search.push(
        function (settings, data, dataIndex) {
            daDataIncarico = parseDate($('input[name=daDataIncarico]').val());
            aDataIncarico = parseDate($('input[name=aDataIncarico]').val());
            dataIncarico = (parseDate(data[1]));

            if ((isNaN(daDataIncarico) && isNaN(aDataIncarico)) || isNaN(dataIncarico)) {
                return true;
            }
            else if (isNaN( daDataIncarico ) && dataIncarico <= aDataIncarico) {
                return true;
            }
            else if ( daDataIncarico <= dataIncarico && isNaN( aDataIncarico ) ) {
                return true;
            }
            else if ( daDataIncarico <= dataIncarico && dataIncarico <= aDataIncarico )
            {
                return true;
            }
            else {
                return false;
            }
        },
        function (settings, data, dataIndex) {
            daDataFattura = parseDate($('input[name=daDataFattura]').val());
            aDataFattura = parseDate($('input[name=aDataFattura]').val());
            dataFattura = parseDate($(data[8]).val());


            if ((isNaN(daDataFattura) && isNaN(aDataFattura)) || isNaN(dataFattura)) {
                return true;
            }
            else if (isNaN( daDataFattura ) && dataFattura <= aDataFattura) {
                return true;
            }
            else if ( daDataFattura <= dataFattura && isNaN( aDataFattura ) ) {
                return true;
            }
            else if ( daDataFattura <= dataFattura && dataFattura <= aDataFattura )
            {
                return true;
            }
            else {
                return false;
            }
        },
        function (settings, data, dataIndex) {
            daDataRestituzione = parseDate($('input[name=daDataRestituzione]').val());
            aDataRestituzione = parseDate($('input[name=aDataRestituzione]').val());
            dataRestituzione = (parseDate(data[2]));


            if ((isNaN(daDataRestituzione) && isNaN(aDataRestituzione)) || isNaN(dataRestituzione)) {
                return true;
            }
            else if (isNaN( daDataRestituzione ) && dataRestituzione <= aDataRestituzione) {
                return true;
            }
            else if ( daDataRestituzione <= dataRestituzione && isNaN( aDataRestituzione ) ) {
                return true;
            }
            else if ( daDataRestituzione <= dataRestituzione && dataRestituzione <= aDataRestituzione )
            {
                return true;
            }
            else {
                return false;
            }
        }
    );
  

    // trigger per data incarico
    $('input[name=daDataIncarico], input[name=aDataIncarico]').on( 'changeDate blur', function () {
        table.draw();
    });

    // trigger per data fattura
    $('input[name=daDataFattura], input[name=aDataFattura]').on( 'changeDate blur', function () {
        table.draw();
    });

    // trigger per data fattura
    $('input[name=daDataRestituzione], input[name=aDataRestituzione]').on( 'changeDate blur', function () {
        table.draw();
    });
});

What I’m trying to do is:
- multiple realtime filter according to data fields (simple text field, date range -with date picker and input mask-, select field -with selectize-, simple checkbox)
- custom sorting icon for manual sort
- realtime data editing for some columns

What I’ve managed so far:
- realtime filtering for multiple text fields and multiple date fields -with date picker and input mask-
- realtime data editing for some columns

Now I’m trying to set up selectize using this code: https://datatables.net/examples/api/multi_filter_select.html but I cannot understand where I should implement it, in relation to my actual custom search functions, defined in $.fn.dataTable.ext.search.push

So, the questions are:

• how should I define distinct search logic for every field?
• how can I implement a individual column sort system?

Thank you
Alex

daniel_r

You can try out my yadcf plugin for datatables, see showcase it got lots of various filters + integration with third party plugins and more...

alzambo

Thank you daniel_r, I've managed the search logic in a simpler way.

Now I would need help just to use my sorting rules instead of the default ones (that would be triggered every time the filters input fields are clicked).

Alex