current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 6.5 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 1 down vote favorite

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

share|improve this question
up vote 2 down vote accepted

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/kvhlU4AwBpgkjem8SN8r?p=preview

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.