How to sort a table with jquery tablesorter images

Question

I am trying to sort a table column whether it contains img or not. So the html table looks something like this:

 <table> <thead> <th>One</th><th>Two</th><th>Three</th> </thead> <tbody> <tr> <td><span class="raw"><img src="path/to/image.png" /></span></td> <td><span class="raw">text 1</span></td> <td><span class="raw">text 2</span></td> </tr> <tr> <td><span class="raw"></span></td> <td><span class="raw">text 4</span></td> <td><span class="raw">text 5</span></td> </tr> <tr> <td><span class="raw"><img src="path/to/image.png" /></span></td> <td><span class="raw">text 22</span></td> <td><span class="raw">text 111</span></td> </tr> </tbody> </table> 

How do I sort the table structure like this? With the final sort result, columns with an image above or below and vice versa

I am using this plugin:

http://tablesorter.com/docs/

Answer 1

Tablesorter is a great plugin - you can sort images by text "alt", defining your own text extraction function as follows:

 $("#table_id").tablesorter({ textExtraction:function(s){ if($(s).find('img').length == 0) return $(s).text(); return $(s).find('img').attr('alt'); } }); 

Cells that do not contain images will be sorted by text.

(*) Confirm jQuery forum for this answer

Answer 2

The easiest way would be to add hidden content to the image cells ( demo ):

 $(function () { $('table img').each(function () { $(this).after('<span style="display:none">1</span>'); }); $('table').tablesorter(); }); 

Also, since it looks like you're doing alphanumeric sorting, you might need to try fork of tablesorter . It will correctly sort text 22 after text 4.

Answer 3

 $("table").tablesorter().on("sortStart",function() { //prepend a sortable string before the image }).on("sortEnd",function() { //remove added string });