我如何使用Angularjs和Datatables在html表中显示数据

Question

我有我的HTML表格如下：

<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>

而且我有js脚本可以在html表中呈现数据。 我如何使用数据表插件和js文件。 我使用下面的脚本也将值加载到我的html页面中。 值加载得很好，但在显示数据表中的数据时我陷入困境

 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

您必须编写一个将直接与数据库通信的后端Web服务服务。

$ http.get（'api / getnavs'）。success（function（data）{$ scope.navs = data;

}）;

通过使用此服务调用，可以从服务器检索数据。 您无法使用诸如Angular JS之类的前端编程语言访问数据库。

但是前端数据库（如pouch DB）还是有机会的。

Answer 2

谢谢大家的回答，他们给了我很好的想法来完成这项任务。 我设法弄清楚该怎么做。 我从一个想法此 ，我设法想出这个代码为我工作。 希望它对遇到相同问题的人有所帮助app.controller（'withOptionsCtrl'，withOptionsCtrl）; 函数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
];

}