Question

使用AngularJS，我使用YADCF过滤器在serverSide模式下工作DataTable（）。现在我需要在表格外添加一些按钮来过滤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所示： enter image description here

Answer 1

尝试评论yadcf.init代码，看看会发生什么，

但即便如此：

1）您可以在表格外放置yadcf过滤器，例如第三列的过滤器http://yadcf-showcase.appspot.com/DOM_source.html

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

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

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

P.S

我是yadcf的作者

JQuery Datatables外部按钮过滤器

1 个答案: