如何從兩個字段的值重新加載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(); 
    } 
} 

如果要強制一個DataTable重載/刷新，你必須調用draw（http://datatables.net/reference/api/draw%28%29）：

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