定期使用ajax響應加載JQuery數據表

我想每30秒使用Ajax響應加載Jquery數據表。我的模型對象格式定期使用ajax響應加載JQuery數據表

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

我加載的文件這個數據準備像下面

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

我已經只有1個圖表的變化，但看起來它不能正常工作，用戶界面是顯示「無可用數據」。肯定有些事情是錯的，無法弄清楚。任何一個來拯救？

來源

2016-10-19 Surinder

你如何處理result.data2，result.data3等？你如何解釋這一點？ – madalinivascu

爲什麼不使用'DataTable'的''ajax''屬性，然後使用DataTable的API中的'.ajax.reload（）'方法每30秒重新載入一次表的數據？看到這個鏈接：[https://datatables.net/examples/ajax/simple.html]（https://datatables.net/examples/ajax/simple.html） – gabriel

'$ .fn.getCurrentDate（）'？或者，換句話說，你下載了一個jQuery擴展，它給你當前的日期......？這有用嗎？另外，如果這樣做的目的是爲了防止瀏覽器緩存Ajax響應，那麼可以採用不同的方式。 – Tomalak

感謝每一位回覆。我想通過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>

來源

2016-10-19 12:52:53 Surinder

定期使用ajax響應加載JQuery數據表

回答

相關問題