I have a table that has a column that is either clicked or not. if clicked == 1, I want to show a font-awesome checkmark in the table cell, otherwise its blank. That all works fine. What is not working is the jquery tablesorter. When I click the column head, nothing is sorted. I have added the parser-input-select.min.js file with no luck.
$(function() {
$('#serviceTable').tablesorter({
theme: 'metro-dark',
showProcessing: true,
headerTemplate: '{content} {icon}',
widgets: ["uitheme", "filter", "zebra", "scroller"],
widgetOptions: {
scroller_height: 1000,
zebra: ["even", "odd"],
filter_reset: ".reset",
filter_cssFilter: "form-control input-sm",
scroller_upAfterSort: true,
scroller_jumpToHeader: true,
scroller_rowHighlight: "hover",
scroller_barWidth: null
}
});
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.widgets.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.32.0/js/widgets/widget-scroller.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css" rel='stylesheet'>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel='stylesheet'>
<table id='serviceTable'>
<thead>
<tr>
<th>Quantity</th>
<th>Allowed</th>
<th>Difference</th>
<th>Billable</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td><i class="fa-solid fa-check"></i></td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>9</td>
<td>2</td>
<td><i class="fa-solid fa-check"></i></td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td></td>
</tr>
</tbody>
</table>6
The answer I found thanks to folks in the comments was:
<tr>
<td>5</td>
<td>9</td>
<td>2</td>
<td data-text=" //1 or 0//"><i class="fa-solid fa-check"></i></td>
</tr>