如何在角度数据表中获取搜索框值

how to get the search box value in angular datatable?

本文关键字：获取 搜索 数据表      更新时间：2023-09-26

我正在使用角度数据表插件，我想获取生成的数据表附带的搜索框的值。Angular datatable 有几个选项来制作数据表，但它们中的任何一个都允许我指定属性或我可以监视以获取特定值的内容。

由于我需要获取数据表的输入搜索值，因此我找不到实现目的的方法。

那么，如何获取角度数据表中的搜索框值呢？

不幸的是，您无法$watch搜索词/过滤器。Angular dataTables 是使 jQuery dataTables 可以在 angular 中运行的指令，没有 DOM 冲突等，但内部仍然像往常一样工作 - 以完全没有角度的方式:)

但是，每次执行搜索/过滤器时，dataTables 都会广播一个 search （.dt ） 事件，然后您可以直接从 DOM 中提取搜索的值：

angular.element('body').on('search.dt', function() {  
   var searchTerm = document.querySelector('.dataTables_filter input').value;
   console.log('dataTables search : ' + searchTerm); 
})

这当然是最简单的类似jQuery的方法。页面上可能有多个 dataTable，并希望为每个搜索提取更详细的信息，然后您可以在您的 angular 应用程序中使用：

angular.element('body').on('search.dt', function(e, api) {  
   if (!$scope.$$phase) { 
      $scope.$apply(function() {
         $scope.searchTerm = api.oPreviousSearch;
         $scope.searchTerm.table = e.target.id;
      })   
   }  
})

$apply以便从事件处理程序内部更新$scope。 oPreviousSearch实际上是当前的搜索，因此上面的内容会在表单上生成一个$watch的"可searchTerm

" 
{
  "bCaseInsensitive": true,
  "sSearch": "test",
  "bRegex": false,
  "bSmart": true,
  "_hungarianMap": {
    "caseInsensitive": "bCaseInsensitive",
    "search": "sSearch",
    "regex": "bRegex",
    "smart": "bSmart"
  },
  "table": "tableId"
}

请参阅演示 -> http://plnkr.co/edit/E5Tr7FrLRIVTtguQHFx9?p=preview

您可以使用 search（） 函数（不带参数）获取实际的搜索值。

要更新它，请确保您：

有一个 dtInstance 和一个 dtOptions 对象： 

<table datatable dt-instance="vm.dtInstance" dt-options="vm.dtOptions">

您将回调绑定到 dtOptions 中的"draw"事件： 

this.dtOptions = { drawCallback: this.myCallbackFunction }

然后在您的函数中，您可以执行以下操作：

this.myCallbackFunction = () => {
   let mySearchValue = this.dtInstance.DataTable.search() 
}
相关文章：