Tablesorter过滤器下拉图标

Question

我使用tablesorter插件创建了一个表。我希望图标出现在过滤器下拉列表中。

有可能吗？

HTML

<script id="log_info" type="text/x-jsrender">
    <table class="tablesorter" style="border-collapse: collapse" cellspacing="0" cellpadding="0">
        <thead>
            <tr>
                <th class="filter-select" data-placeholder="Select a severity">Severity</th>
                <th data-placeholder="Choose timestamp">Timestamp</th>
                <th data-placeholder="Choose a command">Command</th>
                <th class="filter-false">Output</th>
            </tr>
        </thead>
        <tbody>
            {{for data}}
            <tr>
                <td><img class="icon" src="/media/img/block.png" alt="{{>type}}" /> {{:#data[0]}} In</td>
                <td>{{:#data[1]}}</td>
                <td>{{:#data[2]}}</td>
                <td>{{:#data[3]}}</td>
            </tr>
            {{/for}}
        </tbody>
    </table>
</script>

的js

var $table = $('table');

$table.tablesorter({
    theme: 'blue',        
    widthFixed: true,        
    widgets: ["zebra", "filter"],      
    widgetOptions: {            
        filter_cssFilter: 'tablesorter-filter',
        filter_childRows: false,            
        filter_hideFilters: false,           
        filter_ignoreCase: true,           
        filter_reset: '.reset',            
        filter_searchDelay: 300,
        filter_startsWith: false,
        filter_hideFilters: false,
        filter_functions: {                
            0: false
        }
    }
});

Answer 1

正常选择下拉列表不允许HTML;这是在将“filter-select”类添加到标题时创建的内容。

您可以使用select2的模板将图标添加到自定义下拉列表，并使用select2过滤器格式化程序代码（demo）将tablesorter filter_formatter选项添加到您想要的下拉列表中。