AngularJs mit benutzerdefiniertem DataTable-Suchfeld

Ich arbeite mit der AngularJs + DataTable-Bibliothek und möchte ein benutzerdefiniertes Steuerelement erstellen, mit dem eine genaue Suchfunktion aus DataTable angewendet werden kann, jedoch mit einer benutzerdefinierten Benutzeroberfläche und einem benutzerdefinierten Steuerelement. Dasserch() gibt ein Ergebnis der Länge 0 zurück, das keinen Zeichenfolgenwert enthält, und dasdraw() ruft nicht richtig an.

Ich habe einige ähnliche Fragen zu Github, Artikel und Implementierung mit @ verfolg$scope.dtInstance.DataTable.search(...).draw(); aber es stellte sich heraus, es würde nicht funktionieren, also ist unten, was ich versuche, aber das gleiche Ergebnis. Irgendein Vorschlag

Hier ist meine HTML-Implementierung

<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>

Hier ist der Winkelregler

 $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();
};

Antworten auf die Frage(2)

Ihre Antwort auf die Frage