如何根据单元格行中的图像进行排序

Question

我有一个表，其中有一列要么被单击，要么未被单击。 如果单击== 1，我想在表格单元格中显示一个字体很棒的复选标记，否则它是空白的。 一切都很好。不起作用的是jquery tablesorter。 当我单击列标题时，没有任何内容被排序。 我添加了 parser-input-select.min.js 文件，但没有成功。

                $(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>

Answer 1

感谢评论中的人们，我找到的答案是：

                   <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>