角度数据表自定义列过滤器不起作用

我正在尝试角度数据表自定义搜索列执行以下脚本时，它显示未捕获的错误列未定义 显示错误消息。

脚本：这是我的角度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>

'过滤器不起作用，而且我在控制台中收到错误。未定义未捕获的错误列显示错误消息。

解决方案：

$scope.searchData = function (searchText, index) {       
    var table = $('#DataTables_Table_0').DataTable();
    table.columns().every(function () {
        var column = this;
        table.column(index).search(searchText).draw();
    });
};

相关内容

最新更新

热门标签：