DataTables在ajax調用上加載錯誤的結果

我有三個表，我使用select list元素顯示它們中的每一個，並使用ajax和jquery返回表。我希望每當我從列表中選擇一個新表時，ajax應該只從該表中獲取數據。DataTables在ajax調用上加載錯誤的結果

這裏是我的形式：

<div class="panel"> 
    <div class="panel-heading"> 
     <div class="form-group"> 
      <div class="input-group"> 
       <span class="input-group-addon">Term</span> 
       <!-- I passed the tables name as values for a specific period --> 
       <select name="term" class="form-control" id="term"> 
        <option value="">Select Period</option> 
        <option value="period_one">1st Period</option> 
        <option value="period_two">2nd Period</option> 
       </select> 
      </div> 
     </div> 
     <div class="panel-body"> 
      <table class="table table-responsive table-bordered table-condensed table-striped table-hover" id="dataTable"> 
       <thead> 
        <tr> 
         <th>Student Name</th> 
         <th>Subject</th> 
         <th>Class</th> 
         <th>Score</th> 
        </tr> 
       </thead> 
       <tbody id="periodTable"> 
       </tbody> 
      </table> 
    </div> 
    </div>

阿賈克斯帶來的結果預期，但數據表插件我加了一種不刷新的Ajax調用。例如，如果我選擇'第一週期'並且它返回具有兩（2）行'狗和貓'的'第一週期'的表。 dataTables告訴我顯示2到1的1到10這是正確的。但是，如果我選擇「第二階段」，則阿賈克斯返回期望結果，但數據表仍顯示即使'第二階段'具有更少或更多，也顯示2個條目中的1到10個。

此外，如果在下一個表上執行搜索，它不會按預期工作。這裏是我寫我的劇本：

$(document).ready(function() { 
$('#term').on('change', function() { 
    var term = $('#term').val(); 
    if (term != '') { 
     $.ajax({ 
     url:"findGrades.php", 
     type:"post", 
     data:{"term":term}, 
     dataType:"json", 
     success:function(data){ 
      // clearing the table so that only result from the next table are shown. To do this I got help from this thread: 
      //http://stackoverflow.com/questions/43206680/new-ajax-request-on-drop-down-selection 

      $("#periodTable").replaceWith('<tbody id="periodTable"></tbody>'); 
      for (var count = 0; count < data.length; count++) { 
       var htmlData = '<tr><td data-type="text" data-name="student_name" data-pk="'+data[count].id+'" class="student_name">'+data[count].first_name+' '+data[count].middle_name+' '+data[count].surname+'</td>'; 

       htmlData += '<td data-type="text" data-name="subject_name" data-pk="'+data[count].id+'" class="subject_name">'+data[count].subject_name+'</td>'; 

       htmlData += '<td data-type="text" data-name="class_name" data-pk="'+data[count].id+'" class="class_name">'+data[count].class_name+'</td>'; 

       if (data[count].score <= 69) { 
        htmlData += '<td style="color:red;" data-type="text" data-name="score" data-pk="'+data[count].id+'" class="score">'+data[count].score+'</td></tr>'; 
       } else { 
        htmlData += '<td data-type="text" data-name="score" data-pk="'+data[count].id+'" class="score">'+data[count].score+'</td></tr>'; 
       } 
       $("#periodTable").append(htmlData); 
      } 
      // calling the data table function after data have been return by ajax 
      $('#dataTable').DataTable(); 

     } 

     }); 
    } else { 
     $('#periodTable').html(''); 
    } 

}); 
});

來源

2017-04-04 Nathan Siafa

，你必須使用添加行不追加HTML這樣的： https://datatables.net/examples/api/add_row.html

來源

2017-04-04 13:58:22

我看着它，但無法弄清楚如何做到這一點，因爲單擊按鈕時不添加行。會欣賞一些實際的例子。 –

當你點擊你追加HTML到表，新版本的jquery datatable不接受這種方式，所以你必須添加行到主表 –

對不起，我不知道如何做到這一點。我嘗試過：var try = $（'＃periodTable'）.DataTable（），並且還添加了：t.row.add（[count]）。draw（false）。但無濟於事。有沒有一種方法可以真正做到這一點？ –

DataTables在ajax調用上加載錯誤的結果

回答

相關問題