Reload/refresh table after event

Reload/refresh table after event

necnec Posts: 4Questions: 2Answers: 0
edited November 2016 in Free community support

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>

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 48,278Questions: 1Answers: 6,967 Site admin

    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

  • necnec Posts: 4Questions: 2Answers: 0

    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)

  • allanallan Posts: 48,278Questions: 1Answers: 6,967 Site admin
    Answer ✓

    It looks like it should be defined from the above.

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

    Allan

  • necnec Posts: 4Questions: 2Answers: 0

    Works with the last suggestion. Great stuff.

  • jcaceli@e-dswd.netjcaceli@e-dswd.net Posts: 1Questions: 0Answers: 0

    thanks it works ..

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

  • latshalatsha Posts: 1Questions: 0Answers: 0

    Is it possible to add some parameters when reloading data?

  • allanallan Posts: 48,278Questions: 1Answers: 6,967 Site admin

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

    Allan

  • joshadojoshado Posts: 1Questions: 0Answers: 0

    Thanks!

  • EdathadanEdathadan Posts: 1Questions: 0Answers: 0

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

  • suhailvssuhailvs Posts: 1Questions: 0Answers: 0

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

  • jahnelgroupjahnelgroup Posts: 6Questions: 1Answers: 0

    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.

  • kthorngrenkthorngren Posts: 3,939Questions: 19Answers: 871

    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

  • jahnelgroupjahnelgroup Posts: 6Questions: 1Answers: 0

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

  • martinpfengmartinpfeng Posts: 3Questions: 0Answers: 0

    Thanks Allan. This works for me:

    $('#example').DataTable().ajax.reload();
    
  • fotosvinadelmarfotosvinadelmar Posts: 19Questions: 2Answers: 1

    this is working correctly, thanks

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

Sign In or Register to comment.