As the title says, I use tablesorter on an HTML table and I would like to add also the functionality of downloading the whole table in a CSV file.
My problem is that some of the columns don't include text but either an image or an icon. For example,
<table class="tablesorter">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th><i class="icon-2" role="img" aria-label="ColIcon2" title="ColIcon2"></i></th>
</tr>
</thead>
<tbody>
<tr>
<td>This is just a text</td>
<td><a href="/blah" class="class1"><img src="/Img/Icons/image.gif" alt="title1" title="title1"></a></td>
<td><i class="icon-1" role="img" aria-label="Icon1" title="Icon1"></i></td>
</tr>
</tbody>
<tfoot>
<tr >
<td>
<a href="#" class="download">Download as CSV</a>
</td>
</tr>
</tfoot>
</table>
And use the regular, basic setup on tablesorter as this
$(function () {
var $table = $('table');
$('.download').click(function() {
// tell the output widget do it's thing
$table.trigger('outputTable');
});
$table.tablesorter({
theme: 'blue',
widgets: ['zebra', 'output'],
widgetOptions: {
output_includeFooter: false
},
});
});
I am clueless how I could make it that on the positions where there is an Icon or Image, I could either add the title attribute or a custom data-attribute I will add on the HTML code?