jquery - jQuery DataTables 的搜索、排序和分页不适用于 ajax 数据

Question

我能够使用 Ajax 在 jQuery DataTable 中填充数据。但此后，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 DataTable 的函数。我在 $(document).ready() 中调用它:

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