Reload/refresh table after event

nec Posts: 4Questions: 2Answers: 0

November 2016 edited November 2016in 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?

Plain text
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<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>

ajax.reload()
Since: DataTables 1.10
Reload the table data from the Ajax data source.
Description
In an environment where the data shown in the table can be updated at the server-side, it is often useful to be able to reload the table, showing the latest data. This method provides exactly that ability, making an Ajax request to the already defined URL (use ajax.url() if you need to alter the URL).
Type
function ajax.reload( callback, resetPaging )
Parameters:
Name
Type
Optional
1
callback
function
Yes - default:null
Function which is executed when the data has been reloaded and the table fully redrawn. The function is given a single parameter - the JSON data returned by the server, and expects no return.
2
resetPaging
boolean
Yes - default:true
Reset (default action or true) or hold the current paging position (false). A full re-sort and re-filter is performed when this method is called, which is why the pagination reset is the default action.
Returns:
DataTables.Api
DataTables.Api instance
Examples
Reload the table data every 30 seconds (paging reset):
Javascript
1
2
3
4
5
6
7
var table = $('#example').DataTable( {
    ajax: "data.json"
} );
 
setInterval( function () {
    table.ajax.reload();
}, 30000 );
Reload the table data every 30 seconds (paging retained):
Javascript
1
2
3
4
5
6
7
var table = $('#example').DataTable( {
    ajax: "data.json"
} );
 
setInterval( function () {
    table.ajax.reload( null, false ); // user paging is not reset on reload
}, 30000 );
Use the callback to update an external elements:
Javascript
1
2
3
4
5
var table = $('#example').DataTable();
 
table.ajax.reload( function ( json ) {
    $('#myInput').val( json.lastInput );
} );
Related
The following options are directly related and may also be useful in your application development.
API
ajax.json()
ajax.url()
ajax.url().load()
Events
xhr
Options
ajax
Comments (1)
hnhegde@v1.10.1909:41, Mon 1st Apr 2019
In this forum response, Allan had mentioned a significant point about the behavior of ajax.reload().
ajax.data when initialized as a static object ie.,
Javascript
1
2
3
4
5
6
7
8
9
$(#table).DataTable({
    ajax:  {
        url: "/url_endpoint/",
        data: {
            "param1": "value1",
            "param2": "value2"
        }
    }
});
it will ever be evaluated only once. If you want to read new data on each reload, you'd need to use it as a function - see the ajax.data examples for how to do that.
So, if ajax.reload() has to work for a new set of data inputs, then it is important to initialize ajax.data as a function:
Javascript
1
2
3
4
5
6
7
8
9
$(#table).DataTable({
    ajax:  {
        url: "/url_endpoint/",
        data: function(d){
            d.param1 = "value1";
            d.param2 = "value2";
        }
    }
});
Post new comment
Contributions in the form of tips, code snippets and suggestions for the above material are very welcome. To post a comment, please use the form below. Text is formatted by Markdown.
To post comments, please sign in to your DataTables account, or register:
Sign in
Register
Any questions posted here will be deleted without being published.
Please post questions in the Forums. Comments are moderated.
Reload/refresh table after event
Reload/refresh table after event
Reload/refresh table after event

Nguồn:https://datatables.net/forums/discussion/38969/reload-refresh-table-after-event