jQuery数据表的搜索，排序和分页不能与AJAX数据工作

Question

我能够使用Ajax在我的jQuery数据表中填充数据。但在此之后，jQuery DataTables的搜索，排序和分页已停止工作。请帮忙。

这里是我的HTML代码：

<table id="account-details-result-table" 
    class="table table-bordered text-center css-fonts-calibri"> 
    <thead> 
     <tr> 
      <th>Organization Id</th> 
      <th>Organization Name</th> 
      <th>Parent OpCo Name</th> 
      <th>Registered Email Id</th> 
      <th>Registered Phone Number</th> 
     </tr> 
    </thead> 
    <tbody id="search-results-table-tbody"> 
     <!-- append data here --> 
    </tbody> 
</table> 

下面是初始化搜索结果的jQuery的数据表的功能。我称它里面的$（document）。就绪（）：

function initResultDataTable(){ 
    $('#account-details-result-table').DataTable({ 
         "order": [], 
         "columnDefs": [ { 
         "targets" : 'no-sort', 
         "orderable": false, 
         }] 
       }); 
} 

这里是我的Ajax调用：

function sendSearchAccountDetailsRequest(orgQueryReqJSONString){ 

    $.ajax({ 
      type : 'POST', 
      url : ctx+'/SearchController', 
      data: orgQueryReqJSONString, 
      contentType: 'application/json',                    
      success : function(response) {     
      //process JSON response here     
      var counter = 0; 
      var tableDataHTML = ''; 

      $.each(response.organizationDetailsList, function(counter){ 
       var $curr = response.organizationDetailsList[counter].organizationDetails; 
       tableDataHTML += '<tr id="searched-row-'+counter+'" class="js-result-tbl-tbody-tr">'+ 
           '<td>'+$curr.organizationID+'</td>'+ 
           '<td>'+$curr.organizationName+'</td>'+ 
           '<td>'+$curr.parentOpCoName+'</td>'+ 
           '<td>'+$curr.registeredEmailID+'</td>'+ 
           '<td>'+$curr.registeredPhoneNo+'</td>'+ 
           '</tr>';    
       }); 

      $('#search-results-table-tbody').empty(); 
      $('#search-results-table-tbody').append(tableDataHTML); 
      }, 
      error : function(response) {     
      //handle errors here 
      alert('Error !!!'+response);    
      } 
    }); 
} 

Answer 1

对于这个问题，你需要记得成功的Ajax调用后的DataTable。

function sendSearchAccountDetailsRequest(orgQueryReqJSONString){ 

$.ajax({ 
     type : 'POST', 
     url : ctx+'/SearchController', 
     data: orgQueryReqJSONString, 
     contentType: 'application/json',                    
     success : function(response) {     
     //process JSON response here     
     var counter = 0; 
     var tableDataHTML = ''; 

     $.each(response.organizationDetailsList, function(counter){ 
      var $curr = response.organizationDetailsList[counter].organizationDetails; 
      tableDataHTML += '<tr id="searched-row-'+counter+'" class="js-result-tbl-tbody-tr">'+ 
          '<td>'+$curr.organizationID+'</td>'+ 
          '<td>'+$curr.organizationName+'</td>'+ 
          '<td>'+$curr.parentOpCoName+'</td>'+ 
          '<td>'+$curr.registeredEmailID+'</td>'+ 
          '<td>'+$curr.registeredPhoneNo+'</td>'+ 
          '</tr>';    
      }); 

     $('#search-results-table-tbody').empty(); 
     $('#search-results-table-tbody').append(tableDataHTML); 
     initResultDataTable(); 
     }, 
     error : function(response) {     
     //handle errors here 
     alert('Error !!!'+response);    
     } 
});}