Show glyphicon in filter dropdown

[ptijul]

Hello,

Thanks a lot for this awesome plugin !!

The "glyphicon" in a table is not captured to be displayed in the filter dropdown. See here an example : http://jsfiddle.net/kzcqko31/3/ I'm currently using the "Test2" with metadata which is closer to the result I want.

However, is it possible to threat the font icon in the "td" and display it in the drop down? The fiddle is just a small example, but I need to show several different categories represented by a glyphicon.

Best regards, ptijul

[thezoggy]

if you want an image, use an image? just set the appropriate tags.. so if using an image specify alt or title or something.. (accessibility dictates you should be doing this anyways) then just pass that to the parser via textExtraction instead of having it parse the html

textExtraction: {
    3: function(node) { return $(node).find("img").attr("alt"); }
},

or if you have a combo of images and non images.. you can detect this and just return the relevant thing..:

textExtraction: {
    3: function(node) { if ($("img[alt]", node).length > 0) {
            return $("img[alt]", node).eq(0).attr("alt");
        } else {
            return $(node).text();
        }
    },
},

[thezoggy]

heres updated example with sample code. notice your example wouldnt even work as you didnt load the required files (css) that is needed to hide the rows for the filter.

http://jsfiddle.net/kzcqko31/4/

[Mottie]

Hey @thezoggy! The image parser is actually built-in to the core in this fork of tablesorter. You can tell the parser where the image data that is to be sorted by setting the imgAttr option (it is "alt" by default).

@ptijul I would agree with thezoggy about accessibility. Check out these instructions.

[TheSin-]

also with glyph since they aren't really images, you could use a data attirb to use for parsing, instead of the image/glyph.

[ptijul]

@thezoggy : Thanks for the update and the missing CSS file. The reason to use font icon and not image is because the quality is not the same and also the performane (new standard best practice). I thought about this idea and was able to make it working with the images but that's not what I want.

@TheSin- : Yes that's what I'm currently doing (check the fiddle in my first comment). Within the table, the glyph is displayed and I see in the dropdown-filter the data attribute set in td.

@Mottie: Thanks for the link.

So you mean, that's not possible and not planned for tablesorter to display glyphicon and image in the dropdown like getting the innerHTML of the td ?

[TheSin-]

I believe with the custom select stuff it might be possible if I have time to look into it I'll try and make a demo, I'm just not sure when I'll have time to try.

[Mottie]

I just added a new demo that applies jQuery UI Selectmenu to a select in the filter row.

The filter widget was updated to allow the filter_selectSource option to accept an array of objects, so this same method can be applied to other plugins. But they will have the same limitations mentioned on the demo page.