Suggestion: images in searchpane

r3ev

Hi,
i'm new here, but i've been experimenting with it hobby-based .
And I've been scouring through the documentation and forums for some months now.

First of all I want to say, what an awesome thing you've created here.
Datatables is very flexible and the documentation is pretty good.

Last week or so I've been experimenting with the searchpane extension.
It works very good. But I decided I wanted images in them

I tried putting the img tag into the label like this:

label: '<img src="https://...../img.png"/>',
                            value: function(rowData, rowIdx){
                                return rowData.affinity === 'test';

                            }

but that resulted in:

<img src="https://path_to_the_img/wor...</span><span class=" dtsp-pill"="">

what was displayed as:

I saw the three dots, and than it occurred to me, that the label probably was cut off after a certain amount of characters or so.
I decided to look into the searchpane source.

There I edited this into the code:

EXISTING CODE starts at line 513 in dataTables.searchPanes.min.js:

                            if (!_this.c.dataLength) {
                                displayMessage = '<span class="' + _this.classes.name + '">' + data + '</span>' + pill;
                            }              

NEW CODE right after code above:

else if (data.search('<img') !== -1){
                                displayMessage = '<span class="' + _this.classes.name + '">' + data + '</span>' + pill;
                            }

I added an option that if the label has <img in it, it doesn't get truncated.

It maybe a nice addition to the seachpane extension.

Cheers r3ev

sandy

Hi @r3ev ,

My suggestion to you would be to set searchPanes.dataLength to false. This will mean that the data is not truncated at all and your img should just be displayed.

While your suggested change would work for your case, it is possible that it would affect other users. We have discussed dealing with html tags in SearchPanes internally previous to this so it is on our radar.

Hope that this helps,
Sandy

r3ev

Hi Sandy,

I totally overlooked that option. Thanks for pointing that out.
It works as espected.

Cheers R3ev