Fix DataTable reinitialise error on delete server

resources/views/servers.blade.php

@@ -166,85 +166,94 @@ Servers
 
 @section('js')
 <script>
-    //Get DT Data 
+    //Get DT Data
     getData('/api/servers');
 
+    let dt = null;
+
     //Datatable
     function dtRender() {
-        $('#dt').DataTable( {
-            'processing': true,
-            'data': JSON.parse(localStorage.getItem('dtdata')),
-            'columns': [
-                { data: 'name' },
-                { data: 'ip' },
-                { data: 'provider' },
-                { data: 'location' },
-                { data: {
-                    'server_id': 'server_id', 
-                    'default': 'default',
-                    'name': 'name',
-                    'status': 'status',
-                    'ip': 'ip'
-                }}
-            ],
-            'columnDefs': [
-                {
-                    'targets': 0,
-                    'className': 'd-none d-md-table-cell',
-                },
-                {
-                    'targets': 1,
-                    'className': 'text-center',
-                },
-                {
-                    'targets': 2,
-                    'className': 'text-center d-none d-lg-table-cell',
-                },
-                {
-                    'targets': 3,
-                    'className': 'text-center d-none d-xl-table-cell',
-                },
-                {
-                    'targets': 4,
-                    'className': 'text-center',
-                    'render': function ( data, type, row, meta ) {
-                        if(data['status'] == 0) {
-                            if(data['default']) {
-                                return '<span class="btn btn-sm btn-warning mr-3"><i class="fas fa-circle-notch fa-spin fa-fw"></i> <b class="d-none d-sm-inline">Wait...</b></span><span class="disabled btn btn-sm btn-danger"><i class="fas fa-times fa-fw"></i> <b class="d-none d-sm-inline">Delete</b></span>';
-                            } else {
-                                return '<button data-id="'+data['server_id']+'" data-ip="'+data['ip']+'" class="btinstall btn btn-sm btn-secondary mr-3"><i class="fas fa-terminal fa-fw"></i> <b class="d-none d-sm-inline">Install</b></button><button data-id="'+data['server_id']+'" data-name="'+data['name']+'" data-ip="'+data['ip']+'" class="btdelete btn btn-sm btn-danger"><i class="fas fa-times fa-fw"></i> <b class="d-none d-sm-inline">Delete</b></button>';
-                            }
-                        } else {    
-                            if(data['default']) {
-                                return '<button data-id="'+data['server_id']+'" class="btmanage btn btn-sm btn-primary mr-3"><i class="fas fa-cog fa-fw"></i> <b class="d-none d-sm-inline">Manage</b></button><span class="disabled btn btn-sm btn-danger"><i class="fas fa-times fa-fw"></i> <b class="d-none d-sm-inline">Delete</b></span>';
+        if ($.fn.dataTable.isDataTable('#dt')) {
+            dt = $('#dt').DataTable();
+        }
+        else {
+            dt = $('#dt').DataTable({
+                'processing': true,
+                'data': JSON.parse(localStorage.getItem('dtdata')),
+                'columns': [
+                    {data: 'name'},
+                    {data: 'ip'},
+                    {data: 'provider'},
+                    {data: 'location'},
+                    {
+                        data: {
+                            'server_id': 'server_id',
+                            'default': 'default',
+                            'name': 'name',
+                            'status': 'status',
+                            'ip': 'ip'
+                        }
+                    }
+                ],
+                'columnDefs': [
+                    {
+                        'targets': 0,
+                        'className': 'd-none d-md-table-cell',
+                    },
+                    {
+                        'targets': 1,
+                        'className': 'text-center',
+                    },
+                    {
+                        'targets': 2,
+                        'className': 'text-center d-none d-lg-table-cell',
+                    },
+                    {
+                        'targets': 3,
+                        'className': 'text-center d-none d-xl-table-cell',
+                    },
+                    {
+                        'targets': 4,
+                        'className': 'text-center',
+                        'render': function (data, type, row, meta) {
+                            if (data['status'] == 0) {
+                                if (data['default']) {
+                                    return '<span class="btn btn-sm btn-warning mr-3"><i class="fas fa-circle-notch fa-spin fa-fw"></i> <b class="d-none d-sm-inline">Wait...</b></span><span class="disabled btn btn-sm btn-danger"><i class="fas fa-times fa-fw"></i> <b class="d-none d-sm-inline">Delete</b></span>';
+                                } else {
+                                    return '<button data-id="' + data['server_id'] + '" data-ip="' + data['ip'] + '" class="btinstall btn btn-sm btn-secondary mr-3"><i class="fas fa-terminal fa-fw"></i> <b class="d-none d-sm-inline">Install</b></button><button data-id="' + data['server_id'] + '" data-name="' + data['name'] + '" data-ip="' + data['ip'] + '" class="btdelete btn btn-sm btn-danger"><i class="fas fa-times fa-fw"></i> <b class="d-none d-sm-inline">Delete</b></button>';
+                                }
                             } else {
-                                return '<button data-id="'+data['server_id']+'" class="btmanage btn btn-sm btn-primary mr-3"><i class="fas fa-cog fa-fw"></i> <b class="d-none d-sm-inline">Manage</b></button><button data-id="'+data['server_id']+'" data-name="'+data['name']+'" data-ip="'+data['ip']+'" class="btdelete btn btn-sm btn-danger"><i class="fas fa-times fa-fw"></i> <b class="d-none d-sm-inline">Delete</b></button>';
+                                if (data['default']) {
+                                    return '<button data-id="' + data['server_id'] + '" class="btmanage btn btn-sm btn-primary mr-3"><i class="fas fa-cog fa-fw"></i> <b class="d-none d-sm-inline">Manage</b></button><span class="disabled btn btn-sm btn-danger"><i class="fas fa-times fa-fw"></i> <b class="d-none d-sm-inline">Delete</b></span>';
+                                } else {
+                                    return '<button data-id="' + data['server_id'] + '" class="btmanage btn btn-sm btn-primary mr-3"><i class="fas fa-cog fa-fw"></i> <b class="d-none d-sm-inline">Manage</b></button><button data-id="' + data['server_id'] + '" data-name="' + data['name'] + '" data-ip="' + data['ip'] + '" class="btdelete btn btn-sm btn-danger"><i class="fas fa-times fa-fw"></i> <b class="d-none d-sm-inline">Delete</b></button>';
+                                }
                             }
+
                         }
-                       
                     }
+                ],
+                'bLengthChange': false,
+                'bAutoWidth': true,
+                'responsive': true,
+                'drawCallback': function (settings) {
+                    //Manage Server
+                    $(".btmanage").click(function () {
+                        window.location.href = '/servers/' + $(this).attr('data-id');
+                    });
+                    //Delete Server
+                    $(".btdelete").click(function () {
+                        serverDelete($(this).attr('data-id'), $(this).attr('data-ip'), $(this).attr('data-name'));
+                    });
+                    //Setup Server
+                    $(".btinstall").click(function () {
+                        $('#installserverid').html($(this).attr('data-id'));
+                        $('#installserverssh').html($(this).attr('data-ip'));
+                        $('#installServerModal').modal();
+                    });
                 }
-            ],
-            'bLengthChange': false,
-            'bAutoWidth': true,
-            'responsive': true,
-            'drawCallback': function(settings) {
-                //Manage Server
-                $(".btmanage").click(function() {
-                    window.location.href = '/servers/'+$(this).attr('data-id');
-                });
-                //Delete Server
-                $(".btdelete").click(function() {
-                    serverDelete($(this).attr('data-id'),$(this).attr('data-ip'),$(this).attr('data-name'));
-                });
-                //Setup Server
-                $(".btinstall").click(function() {
-                    $('#installserverid').html($(this).attr('data-id'));
-                    $('#installserverssh').html($(this).attr('data-ip'));
-                    $('#installServerModal').modal();
-                });
-            }
-        });
+            });
+        }
     }
 
     //Delete Server
@@ -387,4 +396,4 @@ Servers
         }
     });
 </script>
-@endsection
+@endsection

resources/views/sites.blade.php

@@ -148,59 +148,68 @@ Sites
 
 @section('js')
 <script>
-    //Get DT Data 
+    //Get DT Data
     getData('/api/sites');
 
+    let dt = null;
+
     //Datatable
     function dtRender() {
-        $('#dt').DataTable( {
-            'processing': true,
-            'data': JSON.parse(localStorage.getItem('dtdata')),
-            'columns': [
-                { data: 'domain' },
-                { data: 'aliases' },
-                { data: 'server_name' },
-                { data: 'server_ip' },
-                { data: {
-                    'site_id': 'site_id',
-                    'domain': 'domain',
-                }}
-            ],
-            'columnDefs': [
-                {
-                    'targets': 1,
-                    'className': 'd-none d-md-table-cell text-center',
-                },
-                {
-                    'targets': 2,
-                    'className': 'text-center d-none d-lg-table-cell',
-                },
-                {
-                    'targets': 3,
-                    'className': 'text-center d-none d-xl-table-cell',
-                },
-                {
-                    'targets': 4,
-                    'className': 'text-center',
-                    'render': function ( data, type, row, meta ) {
-                        return '<button data-id="'+data['site_id']+'" class="btmanage btn btn-sm btn-primary mr-3"><i class="fas fa-cog fa-fw"></i> <b class="d-none d-sm-inline">Manage</b></button><button data-id="'+data['site_id']+'" data-name="'+data['domain']+'" class="btdelete btn btn-sm btn-danger"><i class="fas fa-times fa-fw"></i> <b class="d-none d-sm-inline">Delete</b></button>';
+        if ($.fn.dataTable.isDataTable('#dt')) {
+            dt = $('#dt').DataTable();
+        }
+        else {
+            dt = $('#dt').DataTable({
+                'processing': true,
+                'data': JSON.parse(localStorage.getItem('dtdata')),
+                'columns': [
+                    {data: 'domain'},
+                    {data: 'aliases'},
+                    {data: 'server_name'},
+                    {data: 'server_ip'},
+                    {
+                        data: {
+                            'site_id': 'site_id',
+                            'domain': 'domain',
+                        }
+                    }
+                ],
+                'columnDefs': [
+                    {
+                        'targets': 1,
+                        'className': 'd-none d-md-table-cell text-center',
+                    },
+                    {
+                        'targets': 2,
+                        'className': 'text-center d-none d-lg-table-cell',
+                    },
+                    {
+                        'targets': 3,
+                        'className': 'text-center d-none d-xl-table-cell',
+                    },
+                    {
+                        'targets': 4,
+                        'className': 'text-center',
+                        'render': function (data, type, row, meta) {
+                            return '<button data-id="' + data['site_id'] + '" class="btmanage btn btn-sm btn-primary mr-3"><i class="fas fa-cog fa-fw"></i> <b class="d-none d-sm-inline">Manage</b></button><button data-id="' + data['site_id'] + '" data-name="' + data['domain'] + '" class="btdelete btn btn-sm btn-danger"><i class="fas fa-times fa-fw"></i> <b class="d-none d-sm-inline">Delete</b></button>';
+                        }
                     }
+                ],
+                'bLengthChange': false,
+                'bAutoWidth': true,
+                'responsive': true,
+                'drawCallback': function (settings) {
+                    //Manage Site
+                    $(".btmanage").click(function () {
+                        window.location.href = '/sites/' + $(this).attr('data-id');
+                    });
+                    //Delete Site
+                    $(".btdelete").click(function () {
+                        siteDelete($(this).attr('data-id'), $(this).attr('data-domain'));
+                    });
                 }
-            ],
-            'bLengthChange': false,
-            'bAutoWidth': true,
-            'responsive': true,
-            'drawCallback': function(settings) {
-                //Manage Site
-                $(".btmanage").click(function() {
-                    window.location.href = '/sites/'+$(this).attr('data-id');
-                });
-                //Delete Site
-                $(".btdelete").click(function() {
-                    siteDelete($(this).attr('data-id'),$(this).attr('data-domain'));
-                });
-            }
-        });
+            });
+        }
     }
 
     //Delete Site
@@ -351,4 +360,4 @@ Sites
         }
     });
 </script>
-@endsection
+@endsection