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

Question

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 1

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