Trying to create a yadcf filter for a column with images

mgutbor

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.

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.

daniel_r

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

mgutbor

Daniel, thanks again for your help. It works.

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; as you could see, the button only throws an alert.

Thanks in advance x2

daniel_r

You must go over yadcf docs to uncover all of its possibilities, use yadcf.exFilterColumn , see working jsfiddle jsfiddle.net/m26jzxsf/1

mgutbor

Hi again Daniel,

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

kthorngren

Found this topic interesting so took a look. I did not find a way to make it work with data-search either (not that I'm an expert or anything). Even tried following the example by backing out all the yadcf code. Seems if data-search is rendered by DT then it doesn't work. Searching the forum I found a few others with the same result. Looks like most did some form of the second example during column render.

I did the same with your example:
https://jsfiddle.net/m26jzxsf/3/

Kevin

mgutbor

Hi Kevin and thanks for your help,

but your example doesn't work, not???

kthorngren

You are right... forgot to save it. Try this one:
https://jsfiddle.net/m26jzxsf/6/

Notice the removal of html5_data: 'data-search',,

Kevin

mgutbor

Kevin, thanks a lot for your solution. It works like a charm.

mgutbor

Hi again to all,

Im trying to use FixedHeaders extension, and continue with my old example that Kevin and Daniel helps me to solve.

The problem now is that I cant make fixedHeader extension works.

Here is my fiddle.

Please help me to merge all. Thanks in advance.

kthorngren

Here you go:
https://jsfiddle.net/0566dbvv/28/

Added the FixedHeader CSS and enabled fixedHeader in the DT initialization.

Kevin

mgutbor

Thanks again Kevin. I forgot to include CSS file.

mgutbor

Kevin, back to my old problem...

Will be posibble to filter in the button by asigned/not assigned and, in the column filter by the colour???

I remeber you the facts: I have four images: black, green, yellow and red. And I have two possible status: assigned/not assigned.
black image belongs to not assigned status and green, yellow and red to assigned status.

Here is my update fiddle.

Thanks in advance...Again

kthorngren

Changed the filter type to regex and your filter button event to this:

        $('.assigned').on('click', function() {
            yadcf.exFilterColumn(oTable, [[0, ['red|yellow|green']]]);
        });

See updated jsfiddle. Seems to work for the button and for the select drop down.

Kevin

mgutbor

Thanks again Kevin. Works fine.

mgutbor

Hi again to all,

I reopened this post to ask for this:

Will be posible to sort this image column?

Returning to my updated fiddle, all I want is to sort this first column (Status) somehow.

Thanks in advance again.

kthorngren

I think you might be able to use this sorting plugin:
https://datatables.net/plug-ins/sorting/alt-string

All you should need to do is set an alt tag for each of your images and enable the plugin on that column.

Kevin

mgutbor

Hi again Kevin,

Could you send me an example fiddle to see it in action???

Thanks in advance x2.

kthorngren

See updated jsfiddle.

I added alt='black' or whatever the appropriate color is to each img. Added the alt-string plugin and type: 'alt-string', to the columnDefs.

Kevin

mgutbor

Kevin, thanks again for your help. Its works.