jQuery tablesorter filter下拉选自定义选项值及更新失效问题咨询

问题原因 #

你当前仅绑定了tablesorter-ready事件，该事件仅在表格首次初始化完成时触发一次。后续表格数据更新、重绘时该事件不会再次触发，自定义下拉选项构建逻辑不会执行，插件就会走默认逻辑生成拼接后的旧值。

解决方案 #

方案1：补充绑定数据更新事件（快速修复） #

同时监听表格初始化完成和数据更新完成两个事件，每次表格变动都会重新执行自定义下拉构建逻辑，代码如下：

// 同时绑定 tablesorter-ready 和 updateComplete 事件
$table.on('tablesorter-ready updateComplete', function(e) {
    var array = $.tablesorter.filter.getOptionSource( $table, 0, true );
    var opts = '<option value=""></option>';
    for (let index = 0; index < array.length; index++) {
        if(array[index].text.trim().length > 0) {
            const $cell = $(array[index].elem);
            // 直接从DOM提取隐藏KEY和显示文本，不依赖字符串分割，稳定性更高
            const optionKey = $cell.find('span[style*="display: none"]').text().trim();
            const optionText = $cell.find('a').text().trim();
            opts += `<option value="${optionKey}">${optionText}</option>`;
        }
    }
    $.tablesorter.filter.buildSelect( $table, 0, opts, true );
});

方案2：注册官方配置回调（更稳定，推荐） #

直接在tablesorter初始化时配置filter_selectSource参数，把自定义下拉生成逻辑注册为插件的内置回调，插件每次需要重绘下拉选项时会自动调用该逻辑，不需要手动监听事件：

$table.tablesorter({
    // 保留你原来的所有配置项，新增如下filter配置
    filter: true,
    filter_selectSource: function(table, column, onlyAvail) {
        // 只处理第一列的下拉逻辑
        if (column === 0) {
            const array = $.tablesorter.filter.getOptionSource(table, column, onlyAvail);
            const optionList = [{value: '', text: ''}];
            array.forEach(item => {
                if (item.text.trim()) {
                    const $cell = $(item.elem);
                    const optionKey = $cell.find('span[style*="display: none"]').text().trim();
                    const optionText = $cell.find('a').text().trim();
                    optionList.push({value: optionKey, text: optionText});
                }
            });
            return optionList;
        }
        // 其他列走默认的下拉生成逻辑
        return $.tablesorter.filter.defaultSelectSource(table, column, onlyAvail);
    }
})

注意事项 #

• 建议给隐藏KEY的span新增自定义类名比如hidden-key，把选择器替换为.hidden-key，避免后续样式调整导致选择器失效。
• 表格数据变更后要调用官方更新方法$table.trigger('update')，不要直接手动修改DOM，确保插件的更新事件能正常触发。

内容的提问来源于stack exchange，提问作者shorif2000