How do I call the destroy function of angular datatables?
I have a controller and I want to call the JQuery Datatables destroy function in the controller as a clock:
$scope.$watch('model.SelectedWaiver', function() {
if ($scope.model.SelectedWaiver.SurchargeID != null) {
//destroy table here
$scope.getIndecies($scope.model.SelectedWaiver);
}
});
I am not customizing the table in any way because there are two tables on the page:
the 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 another 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 make this piece of code in angular?
source to share
With dtInstance
, you have access to the dataTables API:
$scope.dtInstance = {};
add dtInstance
as ad to 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 self-done extended ngDestroy()
bindings cleanup:
$scope.dtInstance.DataTable.ngDestroy();
There is still some style
(and a bit more garbage) left in the headers , so remove them too (here in the table with 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 data tables use multiple dtInstances
and different table id's
.
source to share