How do I re-initialize datatables AFTER data has loaded via AJAX in AngularJS?

Question

I am using AngularJS and Datatables together with a server-side script to obtain data via AJAX.

My controller looks like:

var currentJobId = $stateParams.jobId;
var selectedJobId = $rootScope.currentJob;

if (currentJobId !== selectedJobId) {
    $rootScope.currentJob=$stateParams.jobId;
    var data = {
        id: $stateParams.jobId
    }
    $http.post('http://localhost/angular/scripts/getJob.php', data).success(function (thedata) {
        $scope.job = thedata.information;
        $scope.jobNotes = thedata.notes;
        $scope.jobMaterialUsage = thedata.materialUsage;
        $scope.jobItems = thedata.jobItems;
        $scope.jobSubcontractorCosts = thedata.subcontractorCosts;
        $scope.jobBondMiscCosts = thedata.bondMiscCosts;
        $scope.jobEmployeeTime = thedata.employeeTime;
    });
}

An example table looks like:

<table class="table table-striped table-hover row-links" id="employeeTimeTable" ui-jq="dataTable" ui-options="tableOptions">
    <thead>
        <tr>
            <th>Employee Name</th>
            <th>Total Hours</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="time in jobEmployeeTime" ng-click="goToEmployee(job.id,time.id);">
            <td>{{time.name}}</td>
            <td>{{time.total_minutes}}</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Employee Name</th>
            <th>Total Hours</th>
        </tr>
    </tfoot>
</table>

So it is basically seeing if the job id has changed and if it has changed, it makes the ajax call for the new job info - if it has not changed it does nothing. The problem I have is that my table is being initialized with datatables before the data loads when I hit refresh. Navigating away from the page and going back to it initializes datatables correctly, but when going DIRECTLY to the page through URL or refresh it just puts the data at the top of the table while still maintaining "No data available in table" and none of the datatables functions working.

Answer 1

With Angular ui-router you could do it with resolving your backend data before the state controller gets called.

Please have a look at the demo below or in this jsFiddle .

It's with-out datatables but that's probably the easier part to add.

 (function() { 'use strict'; angular.module('demoApp', ['ui.router', 'angularSpinner']) .run(StartUp) .factory('jobsDataService', JobsDataFactory) .config(Config); function JobsDataFactory($http) { var backendUrl = 'http://jsonplaceholder.typicode.com'; return { get: function(id) { return $http.jsonp(backendUrl + '/posts/'+id +'?callback=JSON_CALLBACK') .then(function(response) { return response.data; }); } }; } function Config($urlRouterProvider, $stateProvider) { $urlRouterProvider.otherwise('/jobs/1'); $stateProvider .state('jobs', { url: '/jobs/:id', templateUrl: 'partials/post.html', resolve: { job: function(jobsDataService, $stateParams) { console.log($stateParams.id); return jobsDataService.get($stateParams.id); } }, controller: function($scope, job) { console.log(job); $scope.job = job; } }); } function StartUp($rootScope){ // only used for loading spinner $rootScope .$on('$stateChangeStart', function(event, toState, toParams, fromState, fromParams){ $rootScope.loading = true; }); $rootScope .$on('$stateChangeSuccess', function(event, toState, toParams, fromState, fromParams){ $rootScope.loading = false; }); } })(); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.3/angular.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/spin.js/2.3.1/spin.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-spinner/0.6.2/angular-spinner.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.js"></script> <div ng-app="demoApp"> <span us-spinner="" ng-if="loading"></span> <a href="#" ui-sref='jobs({id: 1})'>job 1</a> <a href="#" ui-sref='jobs({id: 2})'>job 2</a> <a href="#" ui-sref='jobs({id: 3})'>job 3</a> <div ui-view=""></div> <script type="text/ng-template" id="partials/post.html"> <p>debug id = {{job.id}}</p> <h1>{{job.title}}</h1> <p>{{job.body}}</p> </script> </div>