Datatables Filtering with YADCF - Custom button triggers

Question

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

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)

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.

Daniel · Accepted Answer · 2016-02-01T10:34:26.867

2

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>

edited Feb 01 '16 at 10:34

answered Feb 01 '16 at 07:46

Daniel

36,833
10
119
200

1

I have used your first example as something to work off and I must say that in the end it has worked very well, I appreciate the quick reply and very detailed documentation and examples. You helped me a lot. – Patrick Feb 07 '16 at 01:37
any way to make it work with check boxes? I need to filter by multiple values. – Samia Ruponti Jul 21 '16 at 07:17
@SamiaRuponti you can use multi_select with chosen / select2 plugins , [see first column in showcase](http://yadcf-showcase.appspot.com/DOM_source_select2.html) – Daniel Jul 21 '16 at 08:52

Datatables Filtering with YADCF - Custom button triggers

1 Answers1