DataTable not exposing rows that are clearly visible after ajax update

OKSosume

 jQuery.ajax({
     url: 'AcmeCorpDriver.php',
     data: { functionname: 'GetAllCharges', arguments: $showAll},
     success: function (dataSet)
     {
         $('.orderList').empty().append(dataSet).DataTable();
         document.getElementById('showAll').innerText = ($showAll == true ? 'Show Ready' : 'Show All');
     },

In order to get more data, this is called. However, after the ajax call to 'refresh' the data, the 'table' below has no rows even though they are cleary populated on the screen in the table.

        function handleClick()
        {
            let table = $('.orderList').DataTable();

            table.rows().eq(0).each(function (index)
            {
                var row = table.row(index);
                var data = row.data();

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

You aren't using Datatables API's to update the table so Datatables doesn't know about the changes. See this FAQ for more info.

Looks like you will want to use clear() to clear the Datatable followed by rows.add() to add the new rows in place of $('.orderList').empty().append(dataSet).DataTable();

Kevin

OKSosume

The data that comes back from the PHP server is filled originally with this:
script

<div>
    <table class="row-border cell-border stripe orderList"></table>
</div>
PHP
    <script type="text/javascript">
        $.ajax(
            'CloverDriver.php',
            {
                success: function (dataSet)
                {
                    $('.orderList').empty().append(dataSet).DataTable({order: [[3, 'desc']], paging: false});
                },
                error: function () {
                    alert('There was an error getting data from the payment processor');
                }
            }
        );

The data from PHP comes back as the html table data.
That initial data allows me to loop through the rows.

However, when I make another call to get "all" of the data, the table is filled exactly the same way AND the DataTable displays the rows but, I cannot loop through them. It implies there are no rows.

OKSosume

I can set up a teams session to work with someone that I can pay to get this resolved.
If that is an improper comment, I apologize in advance.

kthorngren

Another option is to use destroy() before you clear the table and repopulate the data. Use DataTable.isDataTable() to see if its already a Datatable before destroying. Something like this:

if (!DataTable.isDataTable('.orderList')) {
    $('.orderList').DataTable().destroy();
}

$('.orderList').empty().append(dataSet).DataTable();

This should reinitialize the Datatable with the new table data.

You can use rows().every() to loop through the rows.

If you still want to setup support access contact @allan by clicking the Ask a Private Question button at the top of this page.

Kevin

OKSosume

Thank you, Destroying the table first worked perfectly. I tried to click 'yes' on 'Did this answer the question?' but it says I don't have permission to do that.

allan

That's odd - it looks like it went though and has marked Kevin's reply as the answer... I'll keep an eye on that.

Allan