如何从两个字段的值重新加载dataTable？

Question

我在dataTable的两个div之间添加了两个文本字段：

$('#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
                                    });
                                }
        });

在运行时，两个字段成功显示：

在字段的on("change")处理程序中，我希望根据字段的值重新加载dataTable：dataTable应显示日期列介于或更低或更早的数据比场值。怎么做？

Answer 1

您可以指定ajax.data来修改Datatable在请求数据时发送到服务器的数据。请参阅文档：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();
    } 
}

如果您想强制进行数据表重新加载/刷新，则必须致电draw（http://datatables.net/reference/api/draw%28%29）：

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