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-28 08:36:56Z

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, 2017 at 8:36

answered Dec 15, 2015 at 11:36

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Naila Akbar Over a year ago

Table does not destroy in your plunker

query Over a year ago

@NullPointer is it wokring for you ?

davidkonrad Over a year ago

@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 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.

Abeer Sul Over a year ago

you save my life! I spent hours on a bug in my datatable, it worked after I destroyed it and recreated it. thank you

yousafsajjad Over a year ago

@AbeerSul how did you recreate the table?

Collectives™ on Stack Overflow

How to call the destroy function of angular datatables?

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related