DataTables Reloads unsuccessful

Question

I am using the following CDN version of Datatables (https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js)
Which gets loaded at the page bottom likeso:

<script type="application/javascript"
            src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js">
 </script>
 <script type="text/javascript">
        $(document).ready(function() {
            // On page load: datatable
            var plugins_table=$('.plugins_table').DataTable({
                "ajax":"indexAjax.php?p=listPluginsforSite",
                "columns":[
                    {"data":"plugin_name"},
                    {"data":"plugin_site_version"},
                    {"data":"plugin_uptodate_status"},
                    {"data":"plugin_activate_choice"},
                    {"data":"plugin_install_choice"}
                ],
                "language": {
                processing: "Traitement en cours...",
                search: "Rechercher&nbsp;:",
                lengthMenu: "Afficher _MENU_ Plugins",
                info: "Affichage du Plugin _START_ &agrave; _END_ sur _TOTAL_ ",
                infoEmpty: "Affichage du Plugin 0 &agrave; 0 sur 0 ",
                infoFiltered: "(filtr&eacute; sur _MAX_ Plugins au total)",
                infoPostFix: "",
                loadingRecords: "Chargement en cours...",
                zeroRecords: "Aucun Plugins &agrave; afficher",
                emptyTable: "Aucune donnée disponible dans le tableau",
                paginate: {
                    first: "Premier",
                    previous: " Pr&eacute;c&eacute;dent",
                    next: "Suivant  ",
                    last: "Dernier"
                },
                aria: {
                    sortAscending: ": activer pour trier la colonne par ordre croissant",
                    sortDescending: ": activer pour trier la colonne par ordre décroissant"
                }
            },
                paging: true,
                autoWidth: false,
                responsive: true,
                pagingType: "full_numbers",
            });
        // This event is triggered by a button with class '.activate_state' on each row...
        $('#plugins_table tbody').on('click', '.activate_choice', function () {
            var plugin_id=$(this).data("id") ;
            var plugin_active_state=$(this).data("active-state");
            var request   = $.ajax({
                url:          'indexAjax.php?p=togglePluginActiveState',
                data:         {plugin_id:plugin_id,active_state:plugin_active_state},
                dataType:     'json',
                type:         'post'
            });
            request.done(function(response){
            if (response.result == 'success') {
                // Reload datable: NEITHER commented solutions work !
                //plugins_table.api().ajax.reload();
                //plugins_table.DataTable().ajax.reload();
            }
        });
        });
        });
    </script>

When I do a 'manual' reload / refresh of the page, the table / page refeshes with the correct data / changes , but I can't get the API to reload the table aftre the successful ajax call...

Answer 1

In the first line you are using api(), but this is only needed if you initialise your datatable using the .dataTable() syntax (notice the small 'd'). Because you are using the .DataTable syntax (with capital 'D') you are already using the DataTables api.

In the second line you are trying to reinitialise your datatable, but plugins_table already exists as a datatable. Instead, refresh it like this:

plugins_table.ajax.reload();