How to call the destroy function of angular datatables?

Question

I have a controller and I want to call the destroy function of Jquery Datatables in the controller in a watch method:

      $scope.$watch('model.SelectedWaiver', function() {
        if ($scope.model.SelectedWaiver.SurchargeID != null) {
            //destroy table here
            $scope.getIndecies($scope.model.SelectedWaiver);

        }
    });

I am not setting up the table in any way currently because there are two tables on the page:

first:

<table datatable="ng" dt-options="dtOptions" dt-columns="dtColumns" class="table-bordered">
    //stuff
</table>

second:

<table datatable="ng" id="secondTable" dt-options="dtOptions" dt-columns="dtColumns" class="table-bordered">
    //stuff
</table>

I want to destroy this table when the user selects a different row in the first table.

jquery equivalent:

<script>
    $(document).ready(function() {
        var table = $('#secondTable').DataTable();


    });
    $('#selectedWaiver').on('change', function () {
        table.destroy();
    });
</script>

How do I do this part of the code in angular?

Using this to inject datatables

davidkonrad · Accepted Answer · 2017-06-28T08:36:56.123

7

With dtInstance you have access to the dataTables API :

$scope.dtInstance = {};

add dtInstance as declaration to the table

<table datatable dt-instance="dtInstance" dt-options="dtOptions" dt-columns="dtColumns">

Now you can destroy the dataTable with

$scope.dtInstance.DataTable.destroy();

angular dataTables have a extended ngDestroy() cleaning up bindings made by itself :

$scope.dtInstance.DataTable.ngDestroy();

There is still some style (and a little bit more garbage left) in the headers, so remove them too (here on a table with the id #table) :

$scope.destroy = function() {
    $scope.dtInstance.DataTable.ngDestroy();
    var i, ths = document.querySelectorAll('#table th');
       for (i=0;i<ths.length;i++) {
          ths[i].removeAttribute('style'); 
       }
    }
}

demo -> http://plnkr.co/edit/fQ9YjsbNBNzyYuuvpk6T?p=preview

If you have multiple angular dataTables, use multiple dtInstances and different table id's.

edited Jun 28 '17 at 08:36

answered Dec 15 '15 at 11:36

davidkonrad

83,997
17
205
265

Table does not destroy in your plunker – Naila Akbar Jan 09 '17 at 08:15
@NullPointer is it wokring for you ? – query Jun 27 '17 at 21:03
@query, I updated the plunkr so it works again. l-lin has changed the repo some time ago, so each and every project, plunkr og fiddle relying on taking the latest build is faced with the Angular4 version. Fun way to keep people busy :( I think you are in the right direction regarding your [question](https://stackoverflow.com/questions/44775899/disable-column-sorting-not-working-in-angularjs-datatable) you will need to destroy the dataTable each time before you reinitialise, now you are reusing the variables over and over. The bindings is not destroyed by themselves. – davidkonrad Jun 28 '17 at 08:42
you save my life! I spent hours on a bug in my datatable, it worked after I destroyed it and recreated it. thank you – Abeer Sul Aug 02 '17 at 04:19
@AbeerSul how did you recreate the table? – yousafsajjad May 07 '19 at 15:26

How to call the destroy function of angular datatables?

1 Answers1

Linked