Angularjs datatable delay from update to return $ http call

Question

In my AngularJS application, I have a view with jQuery datatable , a controller for managing data loaded in datatable, as shown below. When you update the view, the data is loaded without problems into the datatable, but if I change the route to another view, go back to the view with datatable, I get a message (there is no data in the table) ... after tracking the problem I found that this is happening due to the fact that datatable is loaded before the call returns $ http. I tried adding naif to the div containing the data so as not to show it if there is no data but not good luck, since it only worked for the first time. I load the page (updated), but did not work when changing the route. Can someone please tell me what exactly am I doing wrong here and how to solve this problem? Thanks

app.js

$stateProvider.state('app.allmembers', { url: '/members/members-list', templateUrl: 'tpl/members/membersList.html' }) 

Controller.js

  .controller('MembersListController', ['$scope', '$http', 'GlobalService', function($scope, $http, GlobalService) { $scope.dset = []; $scope.getMembersList = function() { var memURL = 'http://localhost:3000/apiserv/members/'; $http({ method:'GET', url: memURL, headers: { 'Content-Type' : 'application/json' } }) .success(function(data,status,headers,config){ $scope.dset = data; $scope.tbOptions = { data: $scope.dset, aoColumns: [ { mData: 'title' }, { mData: 'firstName' }, { mData: 'lastName' }, { mData: 'email' } ], aoColumnDefs: [ { aTargets: [ 3 ], mRender: function ( data, type, full ) { return '<a href="mailto:' + data + '" style=color:red;>' + data + '</a>'; } }, { aTargets: [ 1 ], mRender: function ( data, type, full ) { return '<a href="#/app/members/update-member/' + full._id + '" style=color:blue;>' + data + '</a>'; } } ] }; console.log(data); } }).error(function(data,status,headers,config){ console.log(status); }); }; }]) 

membersList.html

 <div class="wrapper-md" ng-controller="MembersListController" ng-init="getMembersList()"> <div class="row"> <div class="col-sm-10"> <div class="panel panel-default"> <div class="panel-body"> <div class="table-responsive"> <table ui-jq="dataTable" ui-options="tbOptions" class="table table-striped mb-none"> <thead> <tr> <th style="width:15%">Title</th> <th style="width:30%">First Name</th> <th style="width:30%">Last Name</th> <th style="width:25%">Email</th> </tr> </thead> <tbody> </tbody> </table> </div> </div> </div> </div> </div> </div> 

Answer 1

You can use Angular directive for Jquery Datatable instead of using other parameters. This will be useful for adding features in the Angular way .

URL: http://l-lin.imtqy.com/angular-datatables/

Please check the following example to help you complete your task.

URL: http://l-lin.imtqy.com/angular-datatables/#/withAjax

Also, please check the following API to match your configurations.

URL: http://l-lin.imtqy.com/angular-datatables/#/api

Working demo: http://plnkr.co/edit/fxkaowyvkyIgRNAgcClI?p=preview

Note: The above demo is in conjunction with the ui-router module. Therefore, I believe that this will solve your problem.

Answer 2

First set tbOptions and set the data object to success:

 .controller('MembersListController', ['$scope', '$http', 'GlobalService', function ($scope, $http, GlobalService) { $scope.tbOptions = { data: [], aoColumns: [ { mData: 'title' }, { mData: 'firstName' }, { mData: 'lastName' }, { mData: 'email' } ], aoColumnDefs: [ { aTargets: [3], mRender: function (data, type, full) { return '<a href="mailto:' + data + '" style=color:red;>' + data + '</a>'; } }, { aTargets: [1], mRender: function (data, type, full) { return '<a href="#/app/members/update-member/' + full._id + '" style=color:blue;>' + data + '</a>'; } } ] }; $scope.getMembersList = function () { var memURL = 'http://localhost:3000/apiserv/members/'; $http({ method: 'GET', url: memURL, headers: { 'Content-Type': 'application/json' } }) .success(function (data, status, headers, config) { $scope.tbOptions.data = data; console.log(data); }).error(function (data, status, headers, config) { console.log(status); }); }; $scope.getMembersList(); }]) 

Also avoid ng-init. Initialize the internal design function. So remove ng-init from your HTML.

Answer 3

MemberService.js

 var MemberService = angular.module('MemberService', []); MemberService.factory('MemberFactory', ['$q', '$http', function ($q, $http) { var memURL = 'http://localhost:3000/apiserv/members/'; return { getMembers: function () { var deferred = $q.defer(); $http({ method: 'GET', url: memURL, headers: {'Content-Type': 'application/json'} }).success(function (data, status, headers, config) { console.log(data); deferred.resolve(data); }).error(function (data, status, headers, config) { deferred.reject(status); }); return deferred.promise; } }; }]); 

app.js (don't forget to include the MemberService module in your application dependency)

 var app = angular.module('application', ['MembersList', 'MemberService']); $stateProvider.state('app.allmembers', { url: '/members/members-list', templateUrl: 'tpl/members/membersList.html', resolve: { membersData: ['MemberFactory', function(MemberFactory { return MemberFactory.getMembers(); } } }) 

memberListCtrl.js

 var MembersList = angular.module('MembersList', []); MembersList.controller('MembersListController', ['$scope', 'GlobalService', 'membersData' function ($scope, GlobalService, membersData) { $scope.tbOptions = { data: membersData, aoColumns: [ {mData: 'title'}, {mData: 'firstName'}, {mData: 'lastName'}, {mData: 'email'} ], aoColumnDefs: [ { aTargets: [3], mRender: function (data, type, full) { return '<a href="mailto:' + data + '" style=color:red;>' + data + '</a>'; } }, { aTargets: [1], mRender: function (data, type, full) { return '<a href="#/app/members/update-member/' + full._id + '" style=color:blue;>' + data + '</a>'; } } ] }; }]); 

here's the gist: https://gist.github.com/senayar/d2e2b09fdf475088a71d

If you still have problems, show your service and controller.

Answer 4

I would prefer that you use ngTableParams. Look at it! Params Table

 app.controller('MembersListController', ['$scope', '$http', 'GlobalService',function($scope,$http, GlobalService,ngTableParams) { data = []; $scope.tableParams = new ngTableParams({ page: 1, count: 10, sorting: { name: 'asc' // initial sorting } }, { counts: [], getData: function ($defer, params) { var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data; var searchedData = searchData(orderedData); params.total(searchedData.length); $scope.events = searchedData.slice((params.page() - 1) * params.count(), params.page() * params.count()); if (params.total() < (params.page() - 1) * params.count()) params.page(1); $defer.resolve($scope.events); }, $scope: { $data: {} } }); var searchData = function (orderedData) { orderedData = $filter('filter')(orderedData); if ($scope.searchText) return $filter('filter')(orderedData, $scope.searchText); return orderedData }; $scope.getMembersList = function() { var memURL = 'http://localhost:3000/apiserv/members/'; $http({ method:'GET', url: memURL, headers: { 'Content-Type' : 'application/json' } }) .success(function(data,status,headers,config){ data = data; // This assigns the data into the array can be accessed through $data in page //$scope.tbOptions = { // data: $scope.dset, // aoColumns: [ // { mData: 'title' }, // { mData: 'firstName' }, // { mData: 'lastName' }, // { mData: 'email' } // ], // aoColumnDefs: [ // { // aTargets: [ 3 ], // mRender: function ( data, type, full ) { // return '<a href="mailto:' + data + '" style=color:red;>' + data + '</a>'; // } // }, // { // aTargets: [ 1 ], // mRender: function ( data, type, full ) { // return '<a href="#/app/members/update-member/' + full._id + '" style=color:blue;>' + data + '</a>'; // } // } // ] //}; console.log(data); } }).error(function(data,status,headers,config){ console.log(status); }); }; }]) 

membersList.html

 <div class="wrapper-md" ng-controller="MembersListController" ng-init="getMembersList()"> <div class="row"> <div class="col-sm-10"> <div class="panel panel-default"> <div class="panel-body"> <div class="table-responsive"> <table ui-jq="dataTable" class="table table-striped mb-none"> <thead> <tr> <th style="width:15%">Title</th> <th style="width:30%">First Name</th> <th style="width:30%">Last Name</th> <th style="width:25%">Email</th> </tr> </thead> <tbody> <tr ng-repeat="data in $data"> <td>{{data.title}}</td> <td>{{data.firstName}}</td> <td>{{data.lastName}}</td> <td>{{data.email}}</td> </tr> </tbody> </table> </div> </div> </div> </div> 

ngTableParams used on the .js page are executed in filter order, the search data in the case of searching the search string is available for searching data. TableParams is reloaded each time to get a list of data.

On the page, $ data is used to access the data present in the tableParams variable in the area. ngTableParams loads a lot faster. Hope this helps