使用带有列跨度的 jQuery Tablesorter答案

【问题标题】：Using jQuery Tablesorter with Column Spans使用带有列跨度的 jQuery Tablesorter
【发布时间】：2016-12-16 18:02:02
【问题描述】：

我正在使用 jQuery tablesorter 插件对包含 14 列的表进行排序。但是，每隔一段时间我需要插入一个跨越所有 14 列的行。但这似乎破坏了排序功能（只有第一列排序，其他所有都被破坏了）。

JavaScript 错误表明 jquery.tablesorter.js 在此返回语句上失败：

function getCachedSortType(parsers,i) {
    return parsers[i].type;
};

有谁知道如何让排序忽略一行？

这是我当前的代码（我不是为了简化而对前两列进行排序）：

$("#myTableId").tablesorter({
    textExtraction: function(node){
        var cellValue = $(node).html();
        return (cellValue == null ? "" : cellValue);
    },
    headers: {
        0: {sorter:'text'},
        1: {sorter:'text'},
        2: {sorter: false},
        3: {sorter: false},
        4: {sorter: false},
        5: {sorter: false},
        6: {sorter: false},
        7: {sorter: false},
        8: {sorter: false},
        9: {sorter: false},
        10: {sorter: false},
        11: {sorter: false},
        12: {sorter: false},
        13: {sorter: false}
    }
});

【问题讨论】：

标签： jquery html-table tablesorter

【解决方案1】：

插件有一个插件：

https://github.com/ascii-soup/Tablesorter-Static-Row-Plugin

另一种方法是使用 tablesorter 插件中的 sortStart 和 sortEnd 绑定，您有一个函数可以在排序之前删除跨行的列，以及在排序之后将它们添加回的函数。上面的插件不适用于跨越所有列的行，因此需要将两者结合起来。

这是执行此操作的一种方法 - 暂时删除 colspan 并在排序之前添加列并在排序之后撤消更改（假设跨越所有列的行具有类 fullSpan）：

$("#myTableId").bind("sortStart",function() { 
        var colCount = getColCount();
        $('tbody .fullSpan').each(function() {
            $(this).removeAttr('colspan');
            for (var i= 0; i < colCount; i++) {
                 $(this).append('<td class="temptd"></td>');
            }
        }); 
}).bind("sortEnd",function() { 
        var colCount = getColCount();
        $('.temptd').remove();
        $('tbody .fullSpan').each(function() {
                 $(this).attr('colspan', colCount);
        });
});

如果需要，您可以将其与静态行插件结合使用（添加小部件和 static 类）。

看看这个 jsfiddle：http://jsfiddle.net/DrZgM/20/

附：静态行插件与最新的 JQuery 有一个错误 - 已嵌入到上面的 JSfiddle 中。

【讨论】：

是的。我很早就看到了。它似乎不起作用。这似乎是对静态行的修复。不是静态的多列跨行。
@RachelG。根据您的评论更新
太棒了！有效。我不需要静态实现，只需要你的代码。太感谢了！ +1

【解决方案2】：

此问题已在 2.3 或更高版本中得到修复。看看this description

【讨论】：