定期的な間隔でajaxレスポンスを使用してJQueryデータテーブルをロードする

Question

30秒ごとにAjaxレスポンスを使用してJqueryデータ型をロードしたい。マイModelオブジェクトの形式は、私が

$(document).ready(function() { 
initialzeTables(); 
     setInterval(function() { 
      initialzeTables(); 
     }, 30000); 

function initialzeTables() { 
      $.ajax({ 
       url: "jsonsource.json", 
       dataType: 'json', 
       type: 'GET', 
       data: function (d) { 
        d.date = $.fn.getCurrentDate() 
       }, 
       success: function (result) { 
        handleResponse(result); 
       } 
      }); 
     } 

} 
function handleResponse(result) { 
      table1Id = $("#table1"); 
      table1.clear(); 
      displayData(result.data1,table1Id); 
      table1.draw(); 
     } 

     function displayData(data, table){ 
      for(var i in data){ 
       var rowData =data[i]; 
       var rowStr = "<tr>" 
        + "<td>"+rowData.Name+"</td>" 
        + "<td>"+rowData.age+"</td>" 
        + "<td>"+rowData.doj+"</td>" 
        + "<td>"+rowData.dept+"</td>" 
        + "</tr>" 
       $("#"+table+" tbody").append(rowStr); 
      } 
     } 

以下のような準備が文書にこのデータをロードしています

MyObject{ 
List<Employee> data1; 
List<Employee> data2; 
List<Employee> data3; 
List<Employee> data4; 
..... 
} 
Employee{ 
    String name; 
    int age; 
    LocalDate doj; 
    String dept; 
... 
} 

である私は第一テーブルの変更を行ったが、それが動作していないように見えますが、UIは "ショーですデータなし"。確かにいくつかのことが間違っている、それを把握することはできません。誰かが救助に？

Answer 1

返信いただきありがとうございます。私はあなたがなどresult.data2、result.data3、と何をしますかthis

 <div class="filter"> 
      Search Data: <input type="text" id="filtertext" placeholder="Filter..."> 
     </div> 
     <h3><font color='red'>Table1 Data</font></h3> 
     <table id="table1" style="background-color: #edf1fa" 
       class="display compact cell-border"> 

     </table> 
     <br> 
     <h3><font color='green'>Table2 Data</font></h3> 
     <table id="table2" style="background-color: #edf1fa" 
       class="display compact cell-border"> 

     </table> 
     <br> 
     <h3><font color='salmon'>Table3 Data</font></h3> 
     <table id="table3" style="background-color: #edf1fa" 
       class="display compact cell-border"> 

     </table> 
     <br> 
     <h3><font color='violet'>Table4 Data</font></h3> 
     <table id="table4" style="background-color: #edf1fa" 
       class="display compact cell-border"> 
     </table> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     buildHeader(); 
     var table1 = $('#table1').DataTable({ 
      "sDom": 'rt', 
      "pagingType": "full_numbers", 
      "ordering": false, 
      "fixedHeader": true, 
      "bScrollCollapse": true 
     }); 
     var table2 = $('#table2').DataTable({ 
      "sDom": 'rt', 
      "pagingType": "full_numbers", 
      "ordering": false, 
      "fixedHeader": true, 
      "bScrollCollapse": true 
     }); 
     var table3 = $('#table3').DataTable({ 
      "sDom": 'rt', 
      "pagingType": "full_numbers", 
      "ordering": false, 
      "fixedHeader": true, 
      "bScrollCollapse": true 
     }); 
     var table4 = $('#table4').DataTable({ 
      "sDom": 'rt', 
      "pagingType": "full_numbers", 
      "ordering": false, 
      "fixedHeader": true, 
      "bScrollCollapse": true 
     }); 

     $("#filtertext").on('keyup', function (e) { 
      table.search(this.value).draw(); 
     }); 
     initialzeTables(); 
     setInterval(function() { 
      initialzeTables(); 
     }, 30000); 
     function buildHeader() { 
      var rowStr = "<thead>" 
        + "<tr>" 
        + "<th>name</th>" 
        + "<th>Age</th>" 
        + "<th>DOJ</th>" 
        + "<th>Dept</th>" 
        + "</tr>" 
        + "</thead>"; 
      $("table.display ").append(rowStr); 
     } 

     function initialzeTables() { 
      $.ajax({ 
       url: "jsonsource.json", 
       dataType: 'json', 
       type: 'GET', 
       data: { 
        "date" : getCurrentDate() 
       }, 
       success: function (result) { 
        handleResponse(result); 
       } 
      }); 
     } 

     function handleResponse(result) { 
      table1Id = $("#table1"); 
      table2Id = $("#table2"); 
      table3Id = $("#table3"); 
      table4Id = $("#table4"); 

      table1.destroy(); 
      table2.destroy(); 
      table3.destroy(); 
      table4.destroy(); 

      table1 = displayData(result.data1, table1Id, table1); 
      table2 = displayData(result.data2, table2Id, table2); 
      table3 = displayData(result.data3, table3Id, table3); 
      table4 = displayData(result.data4, table4Id, table4); 
     } 

     function displayData(data, tableSelector, datatable) { 
      datatable = tableSelector.DataTable({ 
       "sDom": 'rt', 
       "pagingType": "full_numbers", 
       "ordering": false, 
       "fixedHeader": true, 
       "bScrollCollapse": true, 
       "data": data, 
       "columns": [ 
        {"data": "name"}, 
        {"data": "age"}, 
        {"data": "doj"}, 
        {"data": "dept"}, 
       ], 
       "columnDefs": [ 
        { 
         'targets': [0], 
         'orderable': false, 
         'render': function (data, type, row, meta) { 
          data = data != null ? data : ' '; 
          return '<a href="/URL?name=' + data +'">' + data + '</a>'; 
         } 
        }, 
       ] 
      }); 
      return datatable; 
     } 

     function getCurrentDate() { 
      return $.datepicker.formatDate('yy-mm-dd', new Date()); 
     } 
    }); 
</script>