以下是我的代码
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)app \ modules \ 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
答案 0 :(得分:0)
首先更改 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" />
应用\模块\ 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;
应用\模块\ 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>