I am using Angular-datatable for showing data and its working fine with static data, but when if giving data dynamically its not working. Its taking my hard time.
What i want to achieve is to load data from
ajax
indatatable
.
This following code i am using for initialization, and its working fine Plunker:
function MyChapterController($scope, $q, DTOptionsBuilder, DTColumnBuilder, chapter) {
var vm = this;
vm.dtOptions = DTOptionsBuilder.newOptions()
.withPaginationType('full_numbers')
.withDisplayLength(2)
.withDOM('pitrfl');
vm.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('ID'),
DTColumnBuilder.newColumn('title').withTitle('First name'),
DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible()
];
vm.myChapters = [];
}
This is following code not working check Plunker:
function MyChapterController($scope, $q, $resource, DTOptionsBuilder, DTColumnBuilder, chapter) {
var vm = this;
vm.dtOptions = DTOptionsBuilder.newOptions()
.withPaginationType('full_numbers')
.withDisplayLength(2)
.withDOM('pitrfl');
vm.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('ID'),
DTColumnBuilder.newColumn('title').withTitle('First name'),
DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible()
];
vm.myChapters = [{
"id": 860,
"firstName": "Superman",
"lastName": "Yoda"
}, {
"id": 870,
"firstName": "Foo",
"lastName": "Whateveryournameis"
}, {
"id": 590,
"firstName": "Toto",
"lastName": "Titi"
}, {
"id": 803,
"firstName": "Luke",
"lastName": "Kyle"
}];
}
I have also tried with dataresource
Plunker but here also hard luck.
It already consumed my lot of time. So finally i decided to take advice from you all. Any help would be appreciated.
You've missed two points:
ui-router
later that's OK because then you can add the controller in the configuration.{{chapter.id}}
and myChapters
is not available in $scope
because you're using controllerAs
syntax.Please have a look at the demo below or in this updated plunkr.
In the demo below I've only changed the $http.get(...)
to $http.jsonp(...)
to get the json data from mocky.io.
Update
To make the filter an pagination work you have to change the table markup to this.
<table datatable="ng" dt-options="chapterCtrl.dtOptions" dt-column-defs="chapterCtrl.dtColumnDefs" id="cb-mychapter-table" class="row-border hover table table-bordered cb-data-table" cellspacing="0" width="100%">
// Code goes here
'use strict';
angular.module('myApp', ['datatables','ngResource']);
(function (angular) {
'use strict';
angular
.module('myApp')
.controller('myChapterController', MyChapterController)
.factory('chapter', ChapterFactory);
MyChapterController.$inject = ['$scope', '$q', '$resource', 'DTOptionsBuilder', 'DTColumnBuilder', 'chapter'];
function MyChapterController($scope, $q, $resource, DTOptionsBuilder, DTColumnBuilder, chapter) {
var vm = this;
vm.dtOptions = DTOptionsBuilder.newOptions()
.withPaginationType('full_numbers')
.withDisplayLength(2)
.withDOM('pitrfl');
vm.dtColumns = [
DTColumnBuilder.newColumn('id').withTitle('ID'),
DTColumnBuilder.newColumn('title').withTitle('First name'),
DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible()
];
/*vm.myChapters = [{
"id": 860,
"firstName": "Superman",
"lastName": "Yoda"
}, {
"id": 870,
"firstName": "Foo",
"lastName": "Whateveryournameis"
}, {
"id": 590,
"firstName": "Toto",
"lastName": "Titi"
}, {
"id": 803,
"firstName": "Luke",
"lastName": "Kyle"
}];*/
chapter.getChapters().then(function(chapters) {
vm.myChapters = chapters;
});
}
ChapterFactory.$inject = ["$http"];
function ChapterFactory($http) {
return {
getChapters: function() {
return $http.jsonp('http://www.mocky.io/v2/55f2b4cb0938f5cd069cff10?callback=JSON_CALLBACK').then(function(response) {
console.log(response);
return response.data;
});
}
};
}
}(angular));
<!DOCTYPE html>
<html ng-app='myApp'>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<!--<link rel="stylesheet" href="style.css">-->
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.9/js/jquery.dataTables.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script>
<script src="https://cdn.rawgit.com/l-lin/angular-datatables/dev/dist/angular-datatables.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular-resource.min.js"></script>
<!--<script src="script.js"></script>-->
</head>
<body ng-controller="myChapterController as chapterCtrl" >
<table datatable="ng" dt-options="chapterCtrl.dtOptions" dt-column-defs="chapterCtrl.dtColumnDefs" id="cb-mychapter-table" class="row-border hover table table-bordered cb-data-table" cellspacing="0" width="100%">
<thead>
<tr>
<th>ID</th>
<th>FirstName</th>
<th>LastName</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="chapter in chapterCtrl.myChapters">
<td>{{chapter.id}}</td>
<td>{{chapter.firstName}}</td>
<td>{{chapter.lastName}}</td>
</tr>
</tbody>
</table>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With