AngularJs с полем пользовательского поиска DataTable

Question

Я работаю с библиотекой AngularJs + DataTable, и я хочу создать настраиваемый элемент управления, который может применять точно функцию поиска из DataTable, но с пользовательским интерфейсом и контролем. Тем не менее, результат serch() return 0 length, который не содержит ни одного строкового значения, и draw() не отвечает правильно.

У меня есть следующий аналогичный вопрос о github, статья и реализация с $scope.dtInstance.DataTable.search(...).draw(); , но, оказалось, это не сработает, поэтому ниже я попытаюсь, но тот же результат. Любое предложение?

Вот мой HTML реализация

<button class="btn btn-white btn-sm" type="button" 
data-toggle="collapse" data-target="#collapseSearch" 
aria-expanded="false"  
aria-controls="collapseSearch"> 
<i class="fa fa-search"></i> Search 
</button> 

<div class="collapse" id="collapseSearch"> 
         <div class="row margin-top-20px"> 
          <div class="col-sm-12 margin-bottom-5px"> 
           <div class="input-group bookingRecordDataTable_filter dataTables_filter"> 
            <span class="input-group-addon input-addon-green">Search</span> 
            <input type="search" class="form-control" 
            ng-model="searchText" 
             ng-change="searchTable()" 
             placeholder="search" 
             aria-controls="bookingRecordDataTable"> 
           </div> 
          </div> 
         </div> 
        </div> 

<table datatable="ng" 
class="table table-hover" 
dt-options="dtOptions" 
dt-column-defs="dtColumnDefs" id="bookingRecordDataTable" 
dt-instance="dtInstanceCallback"> 
</table> 

Вот угловой контроллер

$scope.dtOptions = DTOptionsBuilder.newOptions() 
    .withOption('bInfo', false) 
    .withOption('bFilter', false) 
    .withOption('bAutoWidth', false) 
    .withOption('bLengthChange', false) 
    .withDOM("<'col-sm-12't><'col-sm-12'p>") 
    .withOption('order', [0, 'desc']) 
    .withBootstrap(); 
$scope.dtColumnDefs = [ 
    DTColumnDefBuilder.newColumnDef(0).withTitle('Id').notVisible(), 
    ... 
]; 
$scope.dtInstanceCallback = function(dtInstance) 
{ 
    var datatableObj = dtInstance; 
    $scope.tableInstance = datatableObj; 
} 
$scope.searchTable = function() 
{ 
    console.log($scope.tableInstance); 
    var query = $scope.searchText; 
    console.log(query); 
    var result = $scope.tableInstance.DataTable.search(query, false, false, false); 
    console.log(result); 
    $scope.tableInstance.DataTable.search(query, false, false, true).draw(); 
}; 

Answer 1

наконец, я узнал эту часть работы по реализации для меня, поделитесь им, если кто-то также сталкиваются с теми же проблемами ,

$scope.dtInstance = {}; 

$scope.searchTable = function() 
{ 
    $scope.dtInstance.DataTable.search($scope.searchText); 

    $scope.dtInstance.DataTable.search($scope.searchText).draw(); 
};