数据表在使用ajax加载行时对数据表进行任何操作后数据丢失

Question

我在CodeIgniter的控制器中使用Ajax来获取dataTable行。

我已经取得了它的成功，但问题是行在数据表上做任何操作时会丢失，如sorting,searching。 但刷新页面后，它回来了。

这里是我的Ajax脚本：

$('#dataTable_choose').DataTable({ 
    responsive: true 
}); 

$('body').on('click', '.getJobApplication', function(e) { 

    //alert(); 

    var noteId = $(this).data('noteId');  
    var note_id = { id : noteId } 

    $.ajax({   
    type: 'POST', 
    async: true, 
    dataType: 'Json',   
    url: get_table_rows, 
    data: note_id, 
    success: function (response) {     

     if(response.length > 0){ 

     for (i = 0; i < response.length; i++) { 

     innerhtml += "<tr>" + 
     "<td>"+response[i].column1+"</td>" + 
     "<td>"+response[i].column2+"</td>" + 
     "<td>"+response[i].column3+"</td>" + 
     "<td>"+response[i].column4+"</td>" + 
     "<td><span class='label label-info'>"+column5+"</span></td>" + 
     "<td>"+ 
     "<button type='button' class='btn btn-success waves-effect waves-light' data-secid="+response[i].id2+" " + 
     " data-fiid = "+response[i].id+" >Choose</button>" + 
     "</td>" +        
     "</tr>"; 

     $('#table_body').html(innerhtml); 
     } 

     } else { 
      console.log('error'); 
     }  

    }, 
    error: function (msg) 
    { 
     console.log('error'); 
    } 

});  

}); 

这里是表HTML代码：

<table id="dataTable_choose" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%"> 
    <thead> 
    <tr> 
     <th>Job Title</th> 
     <th>Qualification</th> 
     <th>Qualification Major</th> 
     <th>Candidate Name</th> 
     <th>Status</th> 
     <th>Action</th>          
    </tr> 
    </thead> 
    <tbody id="table_body"> 

    </tbody> 
</table> 

Answer 1

与阿贾克斯改变你的DataTable的内容后，你需要清除数据表和重绘。下面是对我工作的代码（试图添加您的ID，请验证它们是否正确，并在代码中实现右）：

success: function (response) { 
    //DRAW YOUR innerhtml HERE, as you already do 
    $("#dataTable_choose").dataTable().fnClearTable(); //clear the table 
    $('#dataTable_choose').dataTable().fnDestroy(); //destroy the datatable 
    $('#table_body').html(innerhtml); //add your new data 
    $('#dataTable_choose').DataTable({ //redraw with new data 
     //YOUR OPTIONS HERE 
    }); 
});