0
각도 데이터 테이블을 찾으려고합니다. 사용자 정의 검색 열 아래 스크립트 실행시 표시됩니다. 표시되지 않음 오류 열이 정의되지 않았습니다. 오류 메시지가 표시됩니다.각도 데이터 테이블 사용자 정의 열 필터가 작동하지 않습니다.
SCRIPT : 이 내 JS 각 코드
(function (angular) {
'use strict';
angular.module('datatablesSampleApp', ['datatables']).
controller('simpleCtrl', function ($scope, DTOptionsBuilder, DTColumnBuilder) {
$scope.data = [{
"id": 860,
"firstName": "Superman",
"lastName": "Yoda"
}, {
"id": 870,
"firstName": "Foo",
"lastName": "Whateveryournameis"
}, {
"id": 590,
"firstName": "Toto",
"lastName": "Titi"
}];
$scope.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers');
$scope.searchData = function (searchText, index) {
$scope.table.column(index).search(searchText).draw();
};
$scope.$on('event:dataTableLoaded', function (event, loadedDT) {
$scope.table = loadedDT.DataTable;
});
$scope.blockSorting = function($event){
$event.preventDefault();
$event.stopPropagation();
}
});
})(angular);**HTMl**
I am creating a custom filter in angular js this is my html,
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style/jquery.dataTables.css" />
</head>
<body ng-app="datatablesSampleApp">
<div ng-controller="simpleCtrl" class="code" style="width: 500px">
<table datatable="" dt-options="dtOptions" dt-columns="dtColumns">
<thead>
<tr>
<th>ID
<input type="text" ng-model="search.id" ng-change="searchData(search.id,0)" ng-click="blockSorting($event)" /></th>
<th>FirstName
<input type="text" ng-model="search.firstName" ng-change="searchData(search.firstName,1)" ng-click="blockSorting($event)"/></th>
<th>LastName</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="person in data">
<td>{{ person.id }}</td>
<td>{{ person.firstName }}</td>
<td>{{ person.lastName }}</td>
</tr>
</tbody>
</table>
</div>
<script src="script/jquery-1.10.1.min.js"></script>
<script src="script/jquery.dataTables.js"></script>
<script src="http://code.angularjs.org/1.2.15/angular.js"></script>
<script src="script/angular-resource.js"></script>
<script src="angular-datatables.min.js"></script>
<script src="script.js"></script>
</body>
</html>