How Do I Re-initialize Datatables After Data Has Loaded Via Ajax In Angularjs?

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 =

Solution 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);

functionJobsDataFactory($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;
            });
        }
    };
}

functionConfig($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;
                   }
               });
}

functionStartUp($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;
        });

}
    
})();

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