CODEWITHSUNDEEP
angularjsdatatablesyadcf
NunoRibeiro
NunoRibeiro

Reputation: 511

JQuery Datatables external button filter

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

Upvotes: 1

Views: 2280

Answers (1)

Daniel
Daniel

Reputation: 37061

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

Upvotes: 1

Related Questions