Sorting a table with columns composed of icons

Question

I am using the tablesorter javascript plugin to easily sort a bootstrap 3 table. My current code is simply:

$(document).ready(function() {
    $('.table').tablesorter();
});

My problem arises with columns that have no data but font awesome icons in, the check and the cross.

<i class="fa fa-check"></i>
<i class="fa fa-times"></i>

Because there is no physical text in these columns, I am unable to sort them.

Aside of writing Yes and No beside the icon, is there any workaround to get tablesorter looking at HTML code instead of just text?

You could write "Yes" and "No" in a <span> tag next to your icons and just hide the tag, like this: <span style="display: none;">Yes</span> and see if it will sort on that. — Oliver Spryn
– Oliver Spryn, Commented Jul 30, 2014 at 10:32
Refer to this question stackoverflow.com/questions/8509027/… — Earth
– Earth, Commented Jul 30, 2014 at 10:33
Thanks spryno, works a treat. If you put that in to an answer, then I can mark it as accepted. — mpdc
– mpdc, Commented Jul 30, 2014 at 10:41
Alternatively, you can use a textExtraction function to extract out the class names. This example extracts the id. — Mottie
– Mottie, Commented Jul 30, 2014 at 19:12

mpdc · Accepted Answer · 2014-07-30 12:23:01Z

2

Answer, via spryno724 in the comments:

Add the Yes and No to the table cell, or to save characters, use Y and N.

Then, wrap them in a <span> and set it to style="display:none" in CSS.

The tablesorter plugin will read the Y and N and the table cells will become sortable, but the user will not be able to see it.

answered Jul 30, 2014 at 12:23

mpdc

3,5705 gold badges30 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mottie · Accepted Answer · 2015-11-06 00:47:45Z

0

I posted this answer to your other similar question, but it was deleted for some reason.

Use the textExtraction function (demo):

$('table').tablesorter({
    textExtraction: function(node){ console.log( node.className );
        var $icon = $(node).find('i');
        return $icon.length ? $icon[0].className : node.textContent;
    }
});

answered Nov 6, 2015 at 0:47

Mottie

86.7k30 gold badges132 silver badges248 bronze badges

Collectives™ on Stack Overflow

Sorting a table with columns composed of icons

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related