我正在使用angular datatable plugin,我想获取生成的数据表附带的搜索框的值。Angular 数据表有几个选项来制作数据表,但其中任何一个都允许我指定属性或我可以观看的内容,以获取特定值。
由于我需要获取数据表的输入搜索的值,所以我找不到实现目的的方法。
那么,如何获取角度数据表中的搜索框值?
我正在使用angular datatable plugin,我想获取生成的数据表附带的搜索框的值。Angular 数据表有几个选项来制作数据表,但其中任何一个都允许我指定属性或我可以观看的内容,以获取特定值。
由于我需要获取数据表的输入搜索的值,所以我找不到实现目的的方法。
那么,如何获取角度数据表中的搜索框值?
不幸的是,您不能$watch
搜索词/过滤器。Angular dataTables 是使 jQuery dataTables 可以在没有 DOM 冲突等的情况下以 Angular运行的指令,但内部仍然像往常一样工作 - 以完全无角度的方式 :)
但是,dataTables每次执行搜索/过滤时都会广播一个search
( ) 事件,然后您可以直接从 DOM 中提取搜索的值:.dt
angular.element('body').on('search.dt', function() {
var searchTerm = document.querySelector('.dataTables_filter input').value;
console.log('dataTables search : ' + searchTerm);
})
这当然是最简单的类 jQuery 方法。您可能在页面上有多个数据表,并且希望为每次搜索提取更详细的信息,然后您可以在您的 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
'ablesearchTerm
{
"bCaseInsensitive": true,
"sSearch": "test",
"bRegex": false,
"bSmart": true,
"_hungarianMap": {
"caseInsensitive": "bCaseInsensitive",
"search": "sSearch",
"regex": "bRegex",
"smart": "bSmart"
},
"table": "tableId"
}
您可以使用 search() 函数(不带参数)获取实际搜索值。
要更新它,请确保您:
有一个 dtInstance 和一个 dtOptions 对象:
<table datatable dt-instance="vm.dtInstance" dt-options="vm.dtOptions">
您将回调绑定到 dtOptions 中的“绘制”事件:
this.dtOptions = { drawCallback: this.myCallbackFunction }
然后在您的功能中,您可以执行以下操作:
this.myCallbackFunction = () => {
let mySearchValue = this.dtInstance.DataTable.search()
}