Joginder Pawan Joginder Pawan - 1 hour ago 2
HTML Question

search, sort and pagination of jQuery DataTables not working with ajax data

I am able to populate data in my jQuery DataTable using Ajax. But after this, search, sort and pagination of jQuery DataTables has stopped working. Please help.

Here is my HTML code :

<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>


Below is the function to initialize jQuery DataTable of Search Results. I' calling it inside $(document).ready() :

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


And here is my ajax call :

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

For this issue you need to recall DataTable after successful ajax call.

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