How can i use Angularjs and Datatables to display data in an html table

Question

I have my html table as below:

<div>
  <table datatable="" class="table table-condensed" id="listTable">
    <thead>
      <tr>
        <th>NAV ID</th>
        <th>NAV DATE</th>
        <th>DESCRIPTION</th>
        <th>AMOUNT</th>
        <th>ADMIN FEE</th>
        <th>PURCHASE PRICE</th>
        <th>POSTED BY</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="navs in navs">
        <td>{{navs.NAV_ID}}</td>
        <td>{{navs.NAV_DATE}}</td>
        <td>{{navs.DESCRIPT}}</td>
        <td>{{navs.AMOUNT}}</td>
        <td>{{navs.ADMIN_FEE}}</td>
        <td>{{navs.P_PRICE}}</td>
        <td>{{navs.STAFFNAME}}</td>
      </tr>
    </tbody>
  </table>
</div>

and I have the js script to render the data in my html table. How can i use datatables plugins and the js file. i use the script below too load the values into my html page. the values are loaded well but i am stuck when it comes to displaying the data in a datatable

 angular.module('CrudApp', []).
 config(['$routeProvider',
   function($routeProvider) {
     $routeProvider.
     when('/', {
       templateUrl: 'assets/templates/list.html',
       controller: ListCtrl
     }).
     when('/addNavs', {
       templateUrl: 'assets/templates/addNewNav.html',
       controller: AddCtrl
     }).
     otherwise({
       redirectTo: '/'
     });
   }
 ]);

 function ListCtrl($scope, $http) {
   $http.get('api/getnavs').success(function(data) {
     $scope.navs = data;

   });
 }

Answer 1

You have to write a back-end web services services which will directly communicate with the databases.

$http.get('api/getnavs').success(function(data) { $scope.navs = data;

});

By using this services calls retrieve data from server. you cannot access databases using front end programming languages like angular JS.

But there are opportunities for front end databases like pouch DB .

Answer 2

thank you all for your answers, they gave me great ideas to work around the task. i managed to figure out how to do it. I got an idea from this and i managed to come up with this code that worked for me. Hope it helps someone with the same problem app.controller('withOptionsCtrl', withOptionsCtrl); function withOptionsCtrl($scope, DTOptionsBuilder, DTColumnDefBuilder){

$scope.dtOptions = DTOptionsBuilder.newOptions()
    .withPaginationType('full_numbers')
    .withDisplayLength(5)
    .withDOM('pitrfl');
$scope.dtColumnDefs=[
DTColumnDefBuilder.newColumnDef(0),
DTColumnDefBuilder.newColumnDef(1).notVisible,
DTColumnDefBuilder.newColumnDef(2).notVisible,
DTColumnDefBuilder.newColumnDef(3).notVisible,
DTColumnDefBuilder.newColumnDef(4).notVisible,
DTColumnDefBuilder.newColumnDef(5).notVisible,
DTColumnDefBuilder.newColumnDef(6).notVisible
];

}