Reload/refresh table after event

nec

I am trying to reload the table but I can't seem to find the way to call the reload function.
In the .done function of the 'revoke' event is where I'm trying to call it $(document).on("click", '.revoke', function (event).
Here is how I'm calling it but fails: $('#example').data.reload(); or table.reload(); or table.ajax.reload();
Any ideas?

<script>
    $(document).ready(function () {
       var thedata = GetPermissions();

        var table = $('#example').DataTable({
            data: jQuery.parseJSON(thedata),
            columns: [
                { data: 'Professional' },
                { data: 'Patient' },
                {
                    data: "View",
                    render: function (data, type, row) {
                        if (data === true) {
                            return '<input type="checkbox" checked disabled>';
                        }
                        return '<input type="checkbox" disabled>';
                    }
                },
                {
                    data: "Edit",
                    render: function (data, type, row) {
                        if (data === true) {
                            return '<input type="checkbox" checked disabled>';
                        }
                        return '<input type="checkbox" disabled>';
                    }
                },
                {
                    data: "Insert",
                    render: function (data, type, row) {
                        if (data === true) {
                            return '<input type="checkbox" checked disabled>';
                        }
                        return '<input type="checkbox" disabled>';
                    }
                },
                {
                    data: "Delete",
                    render: function (data, type, row) {
                        if (data === true) {
                            return '<input type="checkbox" checked disabled>';
                        }
                        return '<input type="checkbox" disabled>';
                    }
                },
                {
                    data: "Revoke",
                    render: function (data, type, row) {                     
                            return '<input type="button" class="btn btn-danger btn-xs revoke" data-pro="' + row.ProfessionalID + '" data-pat="' + row.PatientID + '" name="revoke" value="Revoke">';
                     }
                }
            ]
        });

        $(document).on("click", '.revoke', function (event) {
            var sf = $.ServicesFramework(<%=ModuleId %>);
                var serviceUrl = sf.getServiceRoot('omnibody');
                var revoke = { 'ProfessionalID': $(this).data('pro'), 'PatientID': $(this).data('pat') };

                $.ajax({
                    type: "POST",
                    cache: false,
                    url: serviceUrl + "/ModuleTask/RevokeAccessRights",
                    beforeSend: sf.setModuleHeaders,
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify(revoke)
                }).done(function (result) {
//PROBLEM IS HERE
                    // $('#example').data.reload();
                    table.reload();
                }).fail(function (xhr, result, status) {
                    alert('GetPermissions ' + xhr.statusText + ' ' + xhr.responseText + ' ' + xhr.status);
                });
            });
    });
    
    function GetPermissions() {
        var sf = $.ServicesFramework(<%=ModuleId %>);
        var serviceUrl = sf.getServiceRoot('omnibody');
        var jdata;
        $.ajax({
            type: "GET",
            cache: false,
            async: false,
            url: serviceUrl + "/ModuleTask/GetAccessRightsPivoted",
            beforeSend: sf.setModuleHeaders,
            contentType: "application/json; charset=utf-8"
        }).done(function (result) {
            jdata = result;
            return jdata;
        }).fail(function (xhr, result, status) {
            alert('GetPermissions ' + xhr.statusText + ' ' + xhr.responseText + ' ' + xhr.status);
        });
        return jdata;
    }
</script>

allan

table.ajax.reload();

This is the correct one.

When you do that, what happens? Any errors or messages shown on the console?

$('#example').data.reload();

Won't work because data.reload() is not a jQuery function. ajax.reload() is specific to the DataTables API.

table.reload();

Won't work because there is no top level reload() method in DataTables.

Allan

nec

When I use table.ajax.reload();
I get an error: Uncaught ReferenceError: table is not defined

Please also note the highlights in the Console (debug) (image attached)

allan

It looks like it should be defined from the above.

You could try $('#example').DataTable().ajax.reload();.

Allan

nec

Works with the last suggestion. Great stuff.

jcaceli@e-dswd.net

thanks it works ..

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

latsha

Is it possible to add some parameters when reloading data?

allan

Use ajax.data to control the parameters sent to the server during an Ajax request by DataTables.

Allan

joshado

Thanks!

Edathadan

$('#example').DataTable().ajax.reload(); works, thanks

suhailvs

$('#example').DataTable().ajax.reload(); works like charm in Angular6 application. I used https://l-lin.github.io/angular-datatables/

jahnelgroup

What if our data isn't ajax? I get JSON Invalid error when using this. And this.table.draw() will "redraw" but sorting still doesn't work til I reload the page manually.

kthorngren

What if our data isn't ajax? I get JSON Invalid error when using this.

ajax.reload() is for ajax loaded data. How is your data sourced?

And this.table.draw() will "redraw" but sorting still doesn't work til I reload the page manually.

Sounds like the issue you are trying to resolve is different than this thread. I would suggest creating a new thread describing the issue you are having and posting relevant code.

Kevin

jahnelgroup

@kthorngren You're correct. I have done so.

martinpfeng

Thanks Allan. This works for me:

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

fotosvinadelmar

this is working correctly, thanks

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

Lokeshwari

Im getting below error if i use $('#example').DataTable().ajax.reload();
DataTables warning: table id=tblClients - Invalid JSON response. For more information about this error, please see http://datatables.net/tn/1.
any help?

tangerine

please see http://datatables.net/tn/1.

The help is provided in that link. Did you follow the diagnostic steps explained there?

toot27

I was looking for the best way to reload and this worked perfectly
$('#example').DataTable().ajax.reload();
and table holds filters used so the whole table is not loaded from scratch

aziegler3

$('#example').DataTable().ajax.reload(); did not work for me.
But table.ajax.reload(); worked perfectly. I cannot explain why.

WeiB

same for me it is not working error in JSON
https://datatables.net/tn/1

kthorngren

Did you follow the troubleshooting steps provided in the URL?
http://datatables.net/tn/1.

What did you find?

Kevin

tylerdurden83

My issue with table.ajax.reload(); is that calling it in the success callback of the ajax delete call triggers a server side refresh that might go wrong due to a race condition (sometimes under some circumstances the refresh still receives the deleted row), that's why I wanted to call row.remove without a refresh, but it seems it can't be done....

kthorngren

@tylerdurden83 Why is there a race condition? If you are using a jQuery Ajax call the success condition will only be called when the server script responds. Presumably the response take place only after the row is deleted so the reloaded data shouldn't have the deleted row.

I wanted to call row.remove without a refresh, but it seems it can't be done....

row().remove() will only remove the row from the table not from the server side database.

Maybe you can provide a link to your page or a test case so we can take a look.

Kevin

tylerdurden83

@kthorngren Thanks for helping me. I'll try to add a bit more details. I'm using Play Framework and this page has worked for a number of years. Now I finally had some time to update to the last version of Play and in the process have upgraded all API to return a CompletionStage (Future) or a Result, not sure if it has something to do with it, but that's when I started to notice that after a ajax call to DELETE, in the success callback I'd call table.ajax.reload, and the deleted row was sometimes still returned from the backend, even though on the database it was gone. Adding a setTimeout in the success callback to fire the ajax reload a second after, this weird situation never happens anymore.

About the row().remove(), since I didn't really need a server side refresh of the whole table what I first did was that just remove from the displayed ones the row that was deleted, commenting out the server side reload altogether. I removed the ajax.reload and replaced it with a table.row.remove(id).draw, but the table would be redrawn still with the deleted row. I read in a comment from allan posted a while ago that this is because table.row.remove(id).draw is ignored if server side loading is enabled for the table.

kthorngren

allan posted a while ago that this is because table.row.remove(id).draw is ignored if server side loading is enabled for the table.

Not sure that it is ignored, the remove should still be processed. But the draw() will fetch the current page from the server side script. Since the delete is only in the client but the server script is returning what is in the DB the deleted row returns.

after a ajax call to DELETE, in the success callback I'd call table.ajax.reload, and the deleted row was sometimes still returned from the backend

Your server script would need to be investigated. Sounds like it is returning a response before the deletion is complete.

Kevin

cthompson

What if the datatable is in a sub page? How would I reference this.

$('#siteTable3').DataTable().ajax.reload(); doesn't reload the data in the sub page as I am calling from the parent. Any thoughts?

kthorngren

@cthompson Is it because the table with the id siteTable3 is not in the DOM when you use $('#siteTable3').DataTable().ajax.reload();? Maybe you need to call it when the sub page is opened. You can use $.fn.dataTable.isDataTable() to determine if the Datatable exists and if so use $('#siteTable3').DataTable().ajax.reload();.

If this doesn't help please create a new thread with your question and hopefully a test case to show us what you are doing.

Kevin

cthompson

The sub page is already open in the tab. Records provide a button to change data. I want the updated data to show in the sub page after the update (using ajax) completes. the page is home.php.

There's a LOT of code so it would be hard to show/explain.

I'd be happy with any solution that just makes that page completely reload.

kthorngren

$('#siteTable3').DataTable().ajax.reload(); doesn't reload the data in the sub page

Do you get errors in the browser's console? What exactly happens? Does the browser's network inspector show the XHR request?

You can use something like $('#siteTable3').size() to see if the element is being found.

I want the updated data to show in the sub page after the update (using ajax) completes.

If you are using ajax then you can use the xhr event to $('#siteTable3').DataTable().ajax.reload();. If using jQuery ajax() you can use the success function.

There's a LOT of code so it would be hard to show/explain.

We ask for test cases so we can see the code running to get an understanding of whats gong on.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

cthompson

The ajax succeeds... the page just won't reload.