Angular数据表搜索过滤器在“搜索”按下时

Question

我正在使用带有Angular DataTable的服务器端处理。是否有任何方法可以关闭搜索框中的自动过滤，并使其只在单击搜索按钮时进行搜索/过滤（向服务器发出ajax调用）？希望有经验的Angular DataTable用户能提供帮助。

- vincentsty

---

我对Angular一点也不熟悉，但在普通的数据表中，只需取消搜索输入框上的keyup事件绑定，并添加一个带有单击事件的按钮，调用'draw()'或'fnDraw()'或其等效的Angular函数即可。 - markpsmith

Answer 1

您可以按以下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" >

演示 -> http://plnkr.co/edit/afMNeuUbwolGPffTdson?p=preview

- davidkonrad

---

感谢您的回复。如何扩展以适应多个搜索过滤器输入？ - vincentsty

@vincentsty，"multiple search filter input"是什么意思？我以为这个问题是关于禁用默认自动搜索，并改为通过按钮点击触发搜索。 - davidkonrad

我该如何将类添加到搜索按钮？ - Muhammad Shahzad

我该如何从查询字符串中在服务器端获取搜索值？ - Muhammad Shahzad

嘿@MuhammadShahzad，你可以在链中添加addClass：$('<button/>').addClass('yourClass').text('search')....。关于服务器端处理，它完全取决于您的设置http://l-lin.github.io/angular-datatables/#/serverSideProcessing。您必须有一个正确响应请求的服务（或服务器端脚本），这因情况而异-有关详细信息，请参见链接。 - davidkonrad

非常感谢您 :) 这种方法必须内置。 - Mehmet Hanoğlu