Search code examples
javascriptjquerydatatablesyadcf

Datatables Filtering with YADCF - Custom button triggers

I am tying to use the YADCF extension so that I can sort the data in my table by it's status. I want to be able to click a button (bootstrap pills) and for that to then be the trigger for filtering the data, however I can't figure out how to do so. Below you can see an example from WHMCS, this is what I wish to happen enter image description here

Currently I have been able to filter the data but only by using a select drop down. As you can see below, this is how my table and buttons look (including the added Select element from YADCF) enter image description here

I was able to have the Select element work fully, but what I am asking is: how can I get each individual button/pill trigger a filter for each type of status?

This is the code I have for the table so far

yadcf.init(ticketsTable, [
    {
        column_number: 2,
        filter_container_id: 'test_container_0',
        column_data_type: "html",
        html_data_type: "text",
        filter_default_label: "Select Status"

    },
],
    {
        externally_triggered: false
    }
);

Any help at all would be greatly appreciated.

Solution

  • If all you want to achieve is custom pills you don't need to use my yadcf plugin at all, you can use the simple Datatables api alone, see the following jsbin sample and see code snippet:

    var oTable;
function myPillFilter(data) {
  oTable.columns(0).search(data).draw();
}
$(document).ready(function(){
  oTable = $('#example').DataTable();
});

    But if you want to use the yadcf plugin...

    Your should add a filter for that column and make it hidden and add several buttons / spans / etc with onclick event that will call yadcf external api exFilterColumn

    See the following quick jsbin sample I made

    code snippets:

    var oTable;
function myPillFilter(data) {
    yadcf.exFilterColumn(oTable, [[0, data]]);
}
$(document).ready(function(){
  oTable = $('#example').dataTable().yadcf([
    {column_number : 0, filter_container_id: "some_data"}]);
});



<div onclick="myPillFilter('Some Data 1')">
   some-1
</div>
<div onclick="myPillFilter('Some Data 2')">
   some-2
</div>