JQuery Datatables 外部按钮过滤器

Question

使用 AngularJS，我有一个 DataTable() 在服务器端模式下工作，使用 YADCF 过滤器。现在我需要在 table 之外添加一些按钮来过滤 DataTable...

代码来自myApp.controller

var table = $('#tbl').DataTable({
        stateSave: true,
        stateDuration: -1,
        //sRowSelect: "multi",
        language: sharedProperties.getLanguageDatatable(),
        dom: '<"toolbar">T<"clear">lfrtip',            
        "columnDefs": [
            { "data": "processosId", "targets": 0, "visible": false, "searchable": false },
            { "data": "utilizadoresId", "targets": 1, "visible": false, "searchable": false },
            { "data": "entidadesId", "targets": 2, "visible": false, "searchable": false },
            { "data": "numero", "targets": 3 },
            { "data": "nomeEntidade", "targets": 4, "visible":entidadeCol },
            { "data": "nomeUtilizador", "targets": 5, "visible":utilizadorCol },
            { "data": "estado", "targets": 6 },                
        ],
        serverSide: true,
        ajax: {
            "url": urlProcessos,
            "error": function (reason) {
                if (reason.status == 401) { // Not Authorized
                    self.location = '#/logout';
                }
            }
        },
});

    yadcf.init(table,
    [
        { column_number: 3, filter_type: 'text', filter_default_label: "" },
        { column_number: 4, filter_type: 'text', filter_default_label: "" },
        { column_number: 5, filter_type: 'text', filter_default_label: "" },
        { column_number: 6, filter_type: 'text', filter_default_label: "", },            
    ]);

    $scope.newProcess = function () {            
        table.columns(6).search('Novo').draw();

    }

    $scope.openProcess = function () {
        table.columns(6).search('Aberto').draw();
    }

来自 html 页面的代码：

<a href="#" >
  <div class="col-sm-3" ng-click="newProcess()">
    <div class="xe-label">
      <strong class="num">{{contagens.novos}}</strong>
      <span>Novos Processos</span>
    </div>
  </div>
</a>
<a href="#" >
  <div class="col-sm-3" ng-click="openProcess()">
    <div class="xe-label">
      <strong class="num">{{contagens.abertos}}</strong>
      <span>Processos Abertos</span>
    </div>
  </div>
</a>
<table class="table table-striped table-bordered table-hover" id="tbl" width="100%" style="width: 100%;">
  <thead>
    <tr class="replace-inputs">
      <th>Id</th>
      //and so on...
    </tr>
  </thead>
  <tbody></tbody>
</table>

当我单击 NewProcess 的按钮时，将调用 newProcess() 函数，使用正确的过滤器向服务器发出请求，但在没有过滤器的情况下立即发出另一个请求...

如Fiddler上所示：

Answer 1

尝试注释掉 yadcf.init 代码，看看会发生什么，

但即使如此：

1) 您可以将带有 yadcf 的过滤器放在 table 之外，例如第三列的过滤器 http://yadcf-showcase.appspot.com/DOM_source.html

2) 您可以使用 yadcf api 以编程方式触发 yadcf 过滤器，就像这样 yadcf.exFilterColumn(table, [[6, 'Novo']], true);

好的，所以它与 yadcf 无关，你应该在你的代码中查找可能的冗余搜索调用，我建议你打开 chrome 的开发工具并在控制台中右键单击并标记复选框在 Log XMLHttpRequests 旁边，然后清除控制台并单击 problematic 搜索按钮，您将看到 ajax (XHR) 调用您的服务器，展开它并检查调用堆栈...看看您是否在那里找到有用的东西...

在您的情况下，是 <a href="#" 进行了页面刷新并导致另一个没有过滤器的调用...

p.s

我是yadcf的作者

JQuery Datatables 外部按钮过滤器

JQuery Datatables external button filter

angularjs

jquery-datatables

yadcf