Angular "search" 按下时的数据表搜索过滤器
Angular datatable search filter on "search" press
我正在对 angular 数据表使用服务器端处理。无论如何要关闭搜索框中的自动过滤并仅在单击搜索按钮时将其设置为 search/filter(ajax 调用服务器端)。希望有 angular 数据表经验的人可以提供帮助。
您可以通过 4 个步骤完成此操作:
- 取消绑定与默认搜索框关联的所有事件处理程序
- 在搜索框旁边添加一个新的搜索按钮
- 包括一个 DataTable 指令实例(
dtInstance
)
- 单击新搜索按钮时通过
dtInstance
执行搜索
使用 initComplete
回调进行修改,例如:
$scope.dtOptions = DTOptionsBuilder.newOptions()
//other options
.withOption('initComplete', function() {
$('.dataTables_filter input').unbind();
$('<button/>').text('search').attr('id', 'new-search').appendTo('.dataTables_filter');
$('#new-search').on('click', function() {
$scope.dtInstance.DataTable.search($('.dataTables_filter input').val()).draw();
})
})
包含指令实例
$scope.dtInstance = {};
<table datatable dt-options="dtOptions" dt-columns="dtColumns" dt-instance="dtInstance" >
我正在对 angular 数据表使用服务器端处理。无论如何要关闭搜索框中的自动过滤并仅在单击搜索按钮时将其设置为 search/filter(ajax 调用服务器端)。希望有 angular 数据表经验的人可以提供帮助。
您可以通过 4 个步骤完成此操作:
- 取消绑定与默认搜索框关联的所有事件处理程序
- 在搜索框旁边添加一个新的搜索按钮
- 包括一个 DataTable 指令实例(
dtInstance
) - 单击新搜索按钮时通过
dtInstance
执行搜索
使用 initComplete
回调进行修改,例如:
$scope.dtOptions = DTOptionsBuilder.newOptions()
//other options
.withOption('initComplete', function() {
$('.dataTables_filter input').unbind();
$('<button/>').text('search').attr('id', 'new-search').appendTo('.dataTables_filter');
$('#new-search').on('click', function() {
$scope.dtInstance.DataTable.search($('.dataTables_filter input').val()).draw();
})
})
包含指令实例
$scope.dtInstance = {};
<table datatable dt-options="dtOptions" dt-columns="dtColumns" dt-instance="dtInstance" >