Reload DataTables after change

nifu

Hello,

i use a Maria SQL DB and DataTables (1.10.18). They are a few buttons for change and remove rows from the table. During an action, the table should automatically reload the data from the database.

I've tried the function load from jquery to refresh a div:

The div:

<div id=maintable>
     <?php require('include/include_main_table.php'); ?>
</div>

The JS function

function f1(objButton){
    var domain = objButton.value;

    $.ajax({
        url: 'https://domain.org/ajax_domain_watch.php',
        method: 'POST',
        data: {
            domain:domain
        },
        success:function(data) {
           $("#maintable").load("include/include_main_table.php");
        },  
    });    
}

Unfortunately the table will not be updated afterwards. I have also tried the DataTables buildin reload function

$('#topdomains').DataTable().ajax.reload();

But i get only the message: Warning: Invalid JSON response.

Can somebody give me a hint why the reload doesn't work?

colin

Hi @nifu ,

You would use ajax.reload() only if DataTables was originally loading the table. You haven't included the table intialisation so it's hard to tell.

We're happy to take a look, but it would help, as per the forum rules, if you could link to a running test case showing the issue so we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

nifu

Hello colin,

thanks for your help.

This is my script where i create the table:

<script>
$(document).ready(function() {
    $('#topdomains').DataTable( {
        "order": [[ 1, "desc" ]],
        "pageLength": 10,
        "bDestroy": true,
        "language": {
            "url": "https://domain.org/German.json"
        },
        "bLengthChange": false,
        "columnDefs": [ {
            "targets": 4,
            "orderable": false,
          } ]
    } );
} );
</script>

colin

Yep, so unless you move the Ajax request into the initialisation, like this example here, the ajax.reload() won't work.

If you want to keep it as it is, you'll need to destroy() the DataTable after you've reloaded the data, then reinitialise it again once the new data is in the DOM,

Cheers,

Colin