Trying to create a yadcf filter for a column with images

Question

I need to create a filter on a tipical columns created with images: each field is an image with this format:

<img src='http://lab.onclud.com/psm/blackcircle.png' class='notasg'>

I've created a fiddle example here: fiddle

An explication:

there are only 2 diferents status: [assigned/not assigned] although there are 4 diferents images (black, red, yellow and green).
Only black image correspond to not assigned status. The others three ones (red, yellow and green) correspond to assigned status.
As you could see, I've tried to differentiate those status by class HTML tag in img elements (notasg/asgn).

Thanks in advance.

PD:

I'm getting data from a json, so I can't put:

<td data-search="notassigned">

directly on HTML code. As a solution, I've used createdCell (columnDefs option) as you could see on the next updated to create data-search attribute on td element fiddle.

In this one, as you could test, your previously created filter doesn't work. I've tried some solutions, but no one has worked.

Please help me again on this one. Thanks in advance.

You must understand that your update on the original question changes the solution that was given based on your original question and original jsfiddle example, which make your update not really an update but a new question — Daniel, Jan 18 '17 at 10:21

score 1 · Accepted Answer · edited May 23 '17 at 12:31

You can make use of the datatables HTML5 data-* attributes, and then tell yadcf to rely on this dt feature with the use of html5_data

So your td will look something like

<td data-search="assigned"><img src='http://lab.onclud.com/psm/redcircle.png' class='asgn'></td>

and yadcf init will look like

var oTable = $('#example').DataTable();

    yadcf.init(oTable, [
        {
            column_number: 0,
            html5_data: 'data-search',
            filter_match_mode: 'exact',
            data: [{
                value: 'assigned',
                label: 'Assigned'
            }, {
                value: 'notassigned',
                label: 'Not assigned'
            }]
        }]);

Notice that I used filter_match_mode: 'exact', because I used data-search="notassigned" and data-search="assigned", and since the assigned word included inside notassigned I had to tell yadcf to perform an exact search, this can be avoided if you will use unique search term in your data-search= attribute,

See working jsfiddle

Another solution as introduced by kthorngren from datatables forum is to use the following dt init code

var oTable = $('#example').DataTable({
    columnDefs: [{
        targets: 0,
        render: function(data, type, full, meta) {
            if (type === 'filter') {
                return full[0].search('asgn') >=1 ? "assigned" : full[0].search('notasg') >= 1 ? "notassigned" : data
            } else {
                return data
            }
        }
    }],
});

and yadcf init (removed html5_data)

yadcf.init(oTable, [
    {
        column_number: 0,
        filter_match_mode: 'exact',
        data: [{
            value: 'assigned',
            label: 'Assigned'
        }, {
            value: 'notassigned',
            label: 'Not assigned'
        }]
    }
]);

third option - look here

I have to ask you other question about this problem: How could I filter this column pressing button [assigned] to obtain only rows with this column data-search="assigned"??? Here is the modified fiddle: https://jsfiddle.net/mgutbor/m26jzxsf/; as you could see, the button only throws an alert. Thanks in advance x2 ;) — mgutbor, Jan 17 '17 at 09:22
you must go over yadcf docs to uncover all of its possibilities, use `yadcf.exFilterColumn` , see working jsfiddle https://jsfiddle.net/m26jzxsf/1/ — Daniel, Jan 17 '17 at 10:00

Trying to create a yadcf filter for a column with images

1 Answers1