I am new to angularjs and angular datatable.

I am new to angularjs and angular datatable.

rajivkumar87rajivkumar87 Posts: 4Questions: 1Answers: 0

I am trying re-produce the example given in "http://l-lin.github.io/angular-datatables/#/zeroConfig", I followed the same step mentioned in. still i am not able to get the out put as mentioned. my code is

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="myApp31">
<head>
<!--Bootstrap css files-->
<link href="css/bootstrap.min.css" rel="stylesheet" />

<!--jquery files-->
<script src="lib/jquery.min.js"></script>
<script src="lib/datatable/js/jquery.dataTables.js"></script>
<script src="lib/angular.min.js"></script>
<script src="lib/datatable/js/angular-datatables.js"></script>
<!--<script src="lib/bootstrap.min.js"></script>-->

<!--angular files-->
<script src="angularfiles/module/module31.js"></script>
<script src="angularfiles/controller/controller31.js"></script>
<script src="angularfiles/services/service31.js"></script>

<title>level 31</title>

</head>
<body ng-controller="myController31">

<table class="table table-bordered table-hover">
    <thead>
        <tr>
            <th>Id</th>
            <th>Name</th>
            <th>Age</th>
            <th>Location</th>
            <th>Special At</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="driver in driversList">
            <td>{{driver.Id}}</td>
            <td>{{driver.Name}}</td>
            <td>{{driver.Age}}</td>
            <td>{{driver.Location}}</td>
            <td>{{driver.SpecialAt}}</td>
        </tr>
    </tbody>
</table>

</body>
</html>

Angular code is :

Module :

'use strict';
var module31 = angular.module('myApp31', ['datatables']);

Controller is :

module31.controller("myController31", ["$scope", "service", function ($scope, service) {
$scope.driversList = [];
service.getDrivers().success(function (response) {
$scope.driversList = response;
});
}]);

Service is:

module31.factory("service", function ($http) {
var driverList = {};
driverList.getDrivers = function () {
return $http({
method: 'POST',
url: 'WebService.asmx/GetData'
});
}
return driverList;
});

I have split the code in to 3 files of javascript, when i remove the 'datatable' from the module, its working fine.
var module31 = angular.module('myApp31', ['datatables']);

looking for some help on this,

thanks in advance.

Answers

This discussion has been closed.