JQuery Datatables external button filter

Question

Working with AngularJS, I have a DataTable() working in serverSide mode, using the YADCF filters. Now I need to add some buttons outside the table to filter the DataTable...

The code from the 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();
    }

The code from the html page:

<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>

When I click the button of the NewProcess, the newProcess() function is called, the request is made to the server with the right filter but another request is made right after without filters...

As shown on Fiddler: enter image description here

Daniel · Accepted Answer · 2015-01-07T16:38:03.287

1

Try commenting out the yadcf.init code and see what happens,

but even bore that:

1) you can place filters with yadcf outside the table like the filter for the third column http://yadcf-showcase.appspot.com/DOM_source.html

2) you can programmatically trigger yadcf filter using yadcf api, like this yadcf.exFilterColumn(table, [[6, 'Novo']], true);

OK, so its not related to yadcf, you should look in your code for possible redundant search calls, I suggest you to open dev tools of chrome and in console do a right click and mark the checkbox next to Log XMLHttpRequests, then clear the console and click on your problematic search button, you will see the ajax (XHR) call to your server, expand it and inspect the call stack... see if you find something useful there ...

In your case it was the <a href="#" that was doing the page refresh and was causing that another call without filters...

p.s

I am the author of yadcf

edited Jan 07 '15 at 16:38

answered Jan 07 '15 at 07:42

Daniel

36,833
10
119
200

Thanks for the reply, it's always nice having the author answering :) unfortunately, your suggestions didn't workout... If I comment the `yadcf.init` all the filters disappear (and that can't happen). Using the `yadcf.exFilterColumn(...)` is not calling the WebApi as it should... Just reload the table with no filtering... – NunoRibeiro Jan 07 '15 at 09:12
Doing some more tests, I realized that the `exFilterColumn(...)` works on the first call (but the problem remains, after the right API call another call is made without filtering) but if I press another button that will activate the `exFilterColumn` it won't work. I have to refreh the page in order to the filter apply... – NunoRibeiro Jan 07 '15 at 09:48
I meant, that you should comment the `yadcf.init` and try using your `table.columns(6).search('Novo').draw();` and see how it works for your (does it still send another request is made right after without filters) ? – Daniel Jan 07 '15 at 10:04
Regarding your last comment, commenting the init and using the search() produce the same result. First call with right filter, second call with existing filter... For instance, If I press the ´newProcess()` button, it will filter by the new ones, next I press the `openProcess()` button and it will make a call for the Open Process and after that call it makes a call for the New Process... – NunoRibeiro Jan 07 '15 at 10:44
OK, so its not related to yadcf, you should look in your code for possible redundant search calls, I suggest you to open dev tools of chrome and in console do a right click and mark the checkbox next to `Log XMLHttpRequests`, then clear the console and click on your "problematic" search button, you will see the ajax (XHR) call to your server, expand it and inspect the call stack... see if you find something usefull there – Daniel Jan 07 '15 at 11:18
you're absoulutly correct! It's redundant call, the `href="#"` refresh all the page that's why another call was made... I'm going to delete this post because that's an 'inside' error but I need to ask you another question, where can I do that? – NunoRibeiro Jan 07 '15 at 15:01
No need to delete question since this answer does lead to the solution (updated the answer based on comments), you can ask new question and tag it with yadcf too, or use the google groups of mine plugins... – Daniel Jan 07 '15 at 16:39
already asked: [here](http://stackoverflow.com/questions/27824704/yadcf-multi-select-filter-with-server-side) – NunoRibeiro Jan 07 '15 at 17:07

JQuery Datatables external button filter

1 Answers1