带有 angularjs 的数据表不适用于 Columns 和 dtOptions

Posted 2023-05-07

【中文标题】带有 angularjs 的数据表不适用于 Columns 和 dtOptions

【英文标题】：Datatable with angularjs not working witth dtColumns and dtOptions

【发布时间】：2018-08-08 00:53:48

【问题描述】：

下面是我的代码

1) index.html文件中包含的js和css如下

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="assets/js/angular.min.js"></script>
<script src="bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="bower_components/angular-datatables/demo/src/archives/dist/angular-datatables.min.js"></script>
<link rel="stylesheet" href="bower_components/angular-datatables/demo/src/archives/dist/css/angular-datatables.min.css" type="text/css" />

2) app.js

var app1 = angular.module('app', ['datatables']);

3) 在 app\modules\curd_datatable\curd.controller.js 中

'use strict';
curdController.$inject = ['$scope', '$http', '$state', 'config', 'DTOptionsBuilder', 'DTColumnBuilder', ];
function curdController($scope, config, DTOptionsBuilder, DTColumnBuilder) 
    $scope.dtOptions = DTOptionsBuilder.newOptions()
      .withOption('ajax', 
        url: 'data.json',
        type: 'GET'
      )
      .withDataProp('data')
      .withOption('serverSide', true)
      .withOption('processing', true)
      .withOption('order', [[0, 'asc'], [1, 'asc']])
      .withPaginationType('full_numbers');
    $scope.dtColumns = [
      DTColumnBuilder.newColumn('id').withTitle('ID'),
      DTColumnBuilder.newColumn('firstName').withTitle('First name'),
      DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible()
    ];




module.exports = curdController;

4) 应用\模块\curd_datatable\curd.html

<div class="container">
    <div class="table-responsive">    
        <div ng-controller="curdController as showCase">
            <table datatable="" dt-options="showCase.dtOptions" dt-columns="showCase.dtColumns" class="row-border hover"></table>
        </div>
    </div>


</div>

5) app\modules\curd_datatable\index.js

angular.module('app').controller('curdController', require('./curd.controller'));

6) app\modules\curd_datatable\data.json

[
    "id": 860,
    "firstName": "Superman",
    "lastName": "Yoda"
, 
    "id": 870,
    "firstName": "Foo",
    "lastName": "Whateveryournameis"
, 
    "id": 590,
    "firstName": "Toto",
    "lastName": "Titi"
, 
    "id": 803,
    "firstName": "Luke",
    "lastName": "Kyle"

]

它给了我如下错误，

angular.min.js:116 TypeError: Cannot read property 'aDataSort' of undefined

【问题讨论】：

JQuery Datatables : Cannot read property 'aDataSort' of undefined的可能重复

Cannot read property 'aDataSort' of undefined in angular datatables的可能重复

为什么用 php 标记？我在这里没有看到任何 PHP...

在上面@RameshRajendran 建议的链接中，它没有使用角度数据表，正确地遵循 angularjs 用于具有 dtColumns 和 dtOptions 的数据表。

【参考方案1】：

首先改变index.html

中的脚本顺序

更新了 index.html

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="assets/js/angular.min.js"></script>
<script src="bower_components/angular-datatables/demo/src/archives/dist/angular-datatables.min.js"></script>
<link rel="stylesheet" href="bower_components/angular-datatables/demo/src/archives/dist/css/angular-datatables.min.css" type="text/css" />

app\modules\curd_datatable\curd.controller.js

控制器中组件的顺序应该相同。

替换：

function curdController($scope, $http, $state, config, DTOptionsBuilder, DTColumnBuilder) 

与：

function curdController($scope, config, DTOptionsBuilder, DTColumnBuilder) 

最终代码

'use strict';
curdController.$inject = ['$scope', '$http', '$state', 'config', 'DTOptionsBuilder', 'DTColumnBuilder'];
function curdController($scope, $http, $state, config, DTOptionsBuilder, DTColumnBuilder) 
    $scope.dtOptions = DTOptionsBuilder.newOptions()
      .withOption('ajax', 
        url: 'data.json',
        type: 'GET'
      )
      .withDataProp('data')
      .withOption('serverSide', true)
      .withOption('processing', true)
      .withOption('order', [[0, 'asc'], [1, 'asc']])
      .withPaginationType('full_numbers');
    $scope.dtColumns = [
      DTColumnBuilder.newColumn('id').withTitle('ID'),
      DTColumnBuilder.newColumn('firstName').withTitle('First name'),
      DTColumnBuilder.newColumn('lastName').withTitle('Last name').notVisible()
    ];




module.exports = curdController;

app\modules\curd_datatable\curd.html

删除ng-controller 和showCase，因为我们不需要它们来访问控制器变量。

<div class="container">
    <div class="table-responsive">
        <table datatable="" dt-options="dtOptions" dt-columns="dtColumns" class="row-border hover"></table>
    </div>
</div>