datatable ajax filterリロードデータ

Question

私はajaxからのデータでデータテーブルを持っています。いくつかの入力フィールドがあります。ボタンをクリックすると、データテーブルに新しいAjaxリクエストを作成し、データをリロードすることができます。私が持っている

：

<script> 
    var domain = []; 
    var subdomain = []; 
    var job_role = []; 
    var month = []; 
    var meta_activity = []; 

    $.fn.dataTableExt.oApi.fnFilterAll = function (oSettings, sInput, iColumn, bRegex, bSmart) { 
     var settings = $.fn.dataTableSettings; 

     for (var i = 0; i < settings.length; i++) { 
      settings[i].oInstance.fnFilter(sInput, iColumn, bRegex, bSmart); 
     } 
    }; 

    $(document).ready(function() { 
     $.ajaxSetup({ 
      headers: { 
       'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') 
      } 
     }); 

     //Init select2 boxes 
     $("#domain").select2({ 
      allowClear: true, 
      ajax: { 
       url: "{!! route('ajaxlistdomain') !!}", 
       dataType: 'json', 
       type: "GET", 
       processResults: function (data) { 
        return { 
         results: $.map(data, function (item) { 
          return { 
           text: item.text, 
           id: item.text 
          } 
         }) 
        }; 
       } 
      } 
     }); 
     //Init select2 boxes 
     $("#subdomain").select2({ 
      allowClear: true, 
      ajax: { 
       url: "{!! route('ajaxlistsubdomain') !!}", 
       dataType: 'json', 
       type: "GET", 
       processResults: function (data) { 
        return { 
         results: $.map(data, function (item) { 
          return { 
           text: item.text, 
           id: item.text 
          } 
         }) 
        }; 
       } 
      } 
     }); 
     //Init select2 boxes 
     $("#jobrole").select2({ 
      allowClear: true, 
      ajax: { 
       url: "{!! route('ajaxlistjobrole') !!}", 
       dataType: 'json', 
       type: "GET", 
       processResults: function (data) { 
        return { 
         results: $.map(data, function (item) { 
          return { 
           text: item.text, 
           id: item.text 
          } 
         }) 
        }; 
       } 
      } 
     }); 
     //Init select2 boxes 
     $("#month").select2({ 
      allowClear: true, 
      data:[ 
       { id: 'Jan', text: 'Jan' }, 
       { id: 'Feb', text: 'Feb' }, 
       { id: 'Mar', text: 'Mar' }, 
       { id: 'Apr', text: 'Apr' }, 
       { id: 'May', text: 'May' }, 
       { id: 'Jun', text: 'Jun' }, 
       { id: 'Jul', text: 'Jul' }, 
       { id: 'Aug', text: 'Aug' }, 
       { id: 'Sep', text: 'Sep' }, 
       { id: 'Oct', text: 'Oct' }, 
       { id: 'Nov', text: 'Nov' }, 
       { id: 'Dec', text: 'Dec' } 
      ] 
     }); 
     //Init select2 boxes 
     $("#metaactivity").select2({ 
      allowClear: true, 
      ajax: { 
       url: "{!! route('ajaxlistmetaactivity') !!}", 
       dataType: 'json', 
       type: "GET", 
       processResults: function (data) { 
        return { 
         results: $.map(data, function (item) { 
          return { 
           text: item.text, 
           id: item.text 
          } 
         }) 
        }; 
       } 
      } 
     }); 

     $("#update").click(function() 
      { 
       domain = []; 
       subdomain = []; 
       job_role = []; 
       month = []; 
       meta_activity = []; 

       $("#domain option:selected").each(function() 
        { 
        // log the value and text of each option 
        domain.push($(this).val()); 
       }); 
       $("#subdomain option:selected").each(function() 
        { 
        // log the value and text of each option 
        subdomain.push($(this).val()); 
       }); 
       $("#jobrole option:selected").each(function() 
        { 
        // log the value and text of each option 
        job_role.push($(this).val()); 
       }); 
       $("#month option:selected").each(function() 
        { 
        // log the value and text of each option 
        month.push($(this).val()); 
       }); 
       $("#metaactivity option:selected").each(function() 
        { 
        // log the value and text of each option 
        meta_activity.push($(this).val()); 
       }); 
       employeeActivityTable.ajax.reload(); 
       projectActivityTable.ajax.reload(); 
      } 
     ); 

     var employeeActivityTable = $('#employeeActivityTable').DataTable({ 
      ajax: { 
        url: "{!! route('ajaxactivityperemployee') !!}", 
        type: "POST", 
        data: { 
         'domain[]': domain, 
         'subdomain[]': subdomain, 
         'job_role[]': job_role, 
         'month[]': month, 
         'meta_activity[]': meta_activity 
          }, 
        dataType: "JSON" 
       }, 
      columns: [ 
       { data: 'employee_id', name: 'employee_id' }, 
       { data: 'employee_name', name: 'employee_name' }, 
       { data: 'month', name: 'month' }, 
       { data: 'sum_task_hour', name: 'sum_task_hour' } 
       ], 
      columnDefs: [ 
       { 
        "targets": [ 0 ], 
        "visible": false, 
        "searchable": false 
       } 
       ] 
     }); 

     var oTable0 = $("#table1").dataTable(); 

     $("#Search_All").keyup(function() { 
      // Filter on the column (the index) of this element 
      oTable0.fnFilterAll(this.value); 
     }); 

     var projectActivityTable = $('#projectActivityTable').DataTable({ 
      ajax: { 
        "url": "{!! route('ajaxactivityperproject') !!}", 
        "type": "POST", 
        data: { 
         'domain[]': domain, 
         'subdomain[]': subdomain, 
         'job_role[]': job_role, 
         'month[]': month, 
         'meta_activity[]': meta_activity 
          }, 
        dataType: "JSON" 
      }, 
      columns: [ 
       { data: 'project_id', name: 'project_id' }, 
       { data: 'customer_name', name: 'customer_name' }, 
       { data: 'project_name', name: 'project_name' }, 
       { data: 'meta_activity', name: 'meta_activity' }, 
       { data: 'employee_id', name: 'employee_id' }, 
       { data: 'employee_name', name: 'employee_name' }, 
       { data: 'month', name: 'month' }, 
       { data: 'sum_task_hour', name: 'sum_task_hour' } 
       ], 
      columnDefs: [ 
       { 
        "targets": [ 0 ], 
        "visible": false, 
        "searchable": false 
       }, 
       { 
        "targets": [ 4 ], 
        "visible": false, 
        "searchable": false 
       } 
       ] 
     }); 

     var oTable1 = $("#table1").dataTable(); 

     $("#Search_All").keyup(function() { 
      // Filter on the column (the index) of this element 
      oTable1.fnFilterAll(this.value); 
     }); 
    }); 
</script> 

私は（明確にクリアすることも試みている）が、何も起こりません。また、コンソールにエラーは表示されません。何もしません。

私もMySQLデータベースをシャットダウンしようとしましたが、ボタンをクリックするとコンソールのデータテーブルからエラーが発生します。これは、新しいデータを取得しようとしているが、画面上では更新されないことを示しています。

Answer 1

これを実現するために、私は、DataTableのはビルドにreload()機能使用をお勧めしたい：

var table = $('#example').DataTable({ 
    ajax: "data.json" 
}); 

setInterval(function() { 
    table.ajax.reload(); 
}, 30000); 

上記のコードは、指定されたAjaxのソースから与えられたID example 3秒ごとにテーブルを更新します。

実際に必要な部分はtableVar.ajax.reload();です。tableVarを自分の変数に置き換えてください。 employeeActivityTable.ajax.reload();

出典：

employeeActivityTableを更新しhttps://datatables.net/reference/api/ajax.reload%28%29