How to reload dataTable from the values of two fields?

Question

I added two textfields between the two divs of a dataTable :

$('#list_commandes').DataTable({

            responsive: true,

            "oLanguage": {
                "sUrl": "<?php  echo RP_LANG ?>fr_FR.txt",
            },

            "processing": true,

            "serverSide": true,

            ajax: "<?php  echo RP_SSP ?>server_processing_commandes.php",  

            "aoColumnDefs": 
                [{
                    "aTargets": [1],
                    "mData": 1,
                    "mRender": function (data, type, full) {
                        return '<div style="text-align:center;">'+convertDateFormat(data, " / ")+'</div>';
                    }
                },
                {
                    "aTargets": [2],
                    "mData": 2,
                    "mRender": function (data, type, full) {
                        return '<div style="text-align:center;">'+lib_payer(data)+'</div>';
                    }
                },
                { 
                    "aTargets": [3],
                    "mData": 3,
                    "mRender": function (data, type, full) {
                        if (existDetailsCommandeLivrer(data)) {
                            return '<div style="text-align:center;">'+
                                    '<a href="RestaurantCommande/detail/'+ data +'" style="margin-right: 8px;"><span class="mif-stack3 mif-2x"></span></a>'+
                                    '<a href="RestaurantCommande/modifier/'+ data +'" style="margin-right: 8px;"><span class="mif-pencil mif-2x"></span></a>'+
                                    '<span class="mif-cross mif-2x fg-grayLight"></span>'+
                                   '</div>';
                        } else {
                            var refCmd = '\''+full [0]+'\'';
                            return '<div style="text-align:center;">'+
                                    '<a href="RestaurantCommande/detail/'+ data +'" style="margin-right: 8px;"><span class="mif-stack3 mif-2x"></span></a>'+
                                    '<a href="RestaurantCommande/modifier/'+ data +'" style="margin-right: 8px;"><span class="mif-pencil mif-2x"></span></a>'+
                                    '<a href="#" onclick="afficheDlg('+ data +','+refCmd+')"><span class="mif-cross mif-2x" style="color:red;"></span></a>'+
                                   '</div>';
                       }
                     },
                }],

                "aLengthMenu": [[10, 25,50,100, -1], [10, 25,50,100, "Tout"]],

                "initComplete": function(settings, json) {

                                    var html = '<div style="float:left;margin:0.25rem 5rem">'+
                                                    '<div class="input-control text" data-role="input" id="date_deb">'+
                                                        '<input type="text" style="padding-right: 39px;" id="date_deb_" placeholder="<?php echo _getText("commande.entete.filtre.date_deb"); ?>"/>'+
                                                        '<button type="button" tabindex="-1" class="button helper-button clear"><span class="mif-cross"></span></button>'+
                                                    '</div>'+
                                                    '<div class="input-control text" data-role="input" id="date_fin">'+
                                                        '<input type="text" style="padding-right: 39px;" id="date_fin_" placeholder="<?php echo _getText("commande.entete.filtre.date_fin"); ?>"/>'+
                                                        '<button type="button" tabindex="-1" class="button helper-button clear"><span class="mif-cross"></span></button>'+
                                                    '</div>'+
                                                '</div>';

                                    $("#list_commandes_length").after(html);

                                    $("#date_deb").datepicker();
                                    $("#date_fin").datepicker();

                                    $("#date_deb_").val("<?php echo GetToday(); ?>");
                                    $("#date_fin_").val("<?php echo GetToday(); ?>");

                                    $("#date_deb_").on("change", function() {
                                        // reload dataTable
                                    });

                                    $("#date_fin_").on("change", function() {
                                        // reload dataTable
                                    });
                                }
        });

At runtime the two fields are successfully displayed :

In the on("change") handler of the fields I want the dataTable to be reloaded based on the fields's values : the dataTable should display data where a date column is between or less or earlier than the field value. How to do that ?

Answer 1

You can specify ajax.data to modify data sent by Datatable to the server when it request the data. See documentation : http://datatables.net/reference/option/ajax.data

ajax : {
    url : "<?php  echo RP_SSP ?>server_processing_commandes.php",
    data : function(d) {
        d.myCustomParam = $('#my-input').val();
    } 
}

If you want to force a Datatable reload/refresh, you have to call draw ( http://datatables.net/reference/api/draw%28%29 ) :

$('#my-table').Datatable().draw();