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

@Shiffty, I am aware about that part. But, I have to follow above mentioned approach only. — Joginder Pawan
– Joginder Pawan, Commented Jul 17, 2017 at 13:45
I'm assuming that you're doing it like this so you can load server-side data, but then use client-side paging, sorting etc? So right now, the table populates successfully, but the datatables functionality is not working? — markpsmith
– markpsmith, Commented Jul 17, 2017 at 13:46
@markpsmith yes, I,m doing the same as you mentioned. Can you help in finding a wayout ? — Joginder Pawan
– Joginder Pawan, Commented Jul 17, 2017 at 13:51
You could also use the row.add function instead of adding the rows manually to the DOM. — Shiffty
– Shiffty, Commented Jul 17, 2017 at 13:53

Jaydip Shingala · Accepted Answer · 2017-07-17 13:57:04Z

2

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

answered Jul 17, 2017 at 13:57

Jaydip Shingala

4292 gold badges11 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Joginder Pawan Over a year ago

.recalling initResultDataTable() is giving an alert that it can not be recalled. I had to play a trick to make it work. I removed the call from $(document).ready() and called it after successful ajax and made changes in html <tbody id="search-results-table-tbody">  <tr> <td colspan="5"> No data available in table. </td> </tr> </tbody>

Jaydip Shingala Over a year ago

You can apply $('#account-details-result-table').DataTable({ "order": [], "columnDefs": [ { "targets" : 'no-sort', "orderable": false, }] }); this code direct after successful ajax call instead of recalling a function.

Joginder Pawan Over a year ago

problem will remain the same. I have reached to a solution. I used destroy() method before calling initResultDataTable() to destro DataTable instance so that i can be reinitialized. var table = $('#account-details-result-table').DataTable(); table.destroy();

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related