I want to add jQuery datatable using AngularJS.
$scope.SearchData = function () {
var myData = new Object();
myData.EmployeeCode = $("#Person").val();
$http.post("/admin/GetData", myData)
.then(function (response) {
$scope.itemData = response.data.Initiator;
$('#dtBasicExample').DataTable();
});
};
I am using this searching the data. This is working after the second click of button.
i think it's watchers problem, use setTimeout and apply to fix it:
myApp.controller('myController', function($scope, $timeout){ // just example
$timeout(()=>{
$('#dtBasicExample').DataTable();
})
or
setTimeout(()=>{
$('#dtBasicExample').DataTable();
$scope.$apply(); //this triggers a $digest
})
Angular has no way of knowing what you might change. In this case it’s your responsibility to call $apply() manually, which triggers a $digest cycle.
Similarly, if you have a directive that sets up a DOM event listener and changes some models inside the handler function, you need to call $apply() to ensure the changes take effect.
$setTimeout in your first snippet instead of $timeout