忽略 div 元素的 Tablesorter 解析器

Question

我的网页上有几个 table，我在其中使用 tablesorter 扩展程序来进行排序。除一个 table 外，一切正常。这个特定的 table 包含一个数值，但也包含一个 div 元素。问题是，由于存在 div，table 排序器将其视为文本，例如“1000”被排序为低于“999”，因为它只识别初始的 1 和 9 .

我已阅读文档并尝试基于它实现自定义解析器 - http://tablesorter.com/docs/example-parsers.html

不幸的是，它不起作用。基本上我想要实现的目标是 - 单元格总是包含一个数字，后跟“......”等，所以我试图过滤掉初始“<”符号前面的值。但出于某种原因，它只是忽略了解析器。

很难正确解释，所以我创建了一个jsfiddle。请忽略其余的设计、图像等。它在我的页面上看起来不同，但问题确实存在。

例如，查看列 "Total"，其中有大于 1000 的数字，但它被排序为低于 100 以上的数字（它显然被视为文本）。通过单击 table headers.

初始化排序

感谢任何帮助。 http://jsfiddle.net/8v8ycb09/

解析器代码：

$.tablesorter.addParser({ 
    // set a unique id 
    id: 'main', 
    is: function(s) { 
        // return false so this parser is not auto detected 
        return false; 
    }, 
    format: function(s) { 
        // format your data for normalization 
        return s.substr(0, s.indexOf('<')); 
    }, 
    // set type, either numeric or text 
    type: 'numeric' 
});

Answer 1

如果我没理解错的话，你只需要return parseInt(s)从格式功能。

parseInt() 忽略开头的空格和前导数字字符串之后的任何内容。

format: function (s) {
    // format your data for normalization 
    return parseInt(s);
},

并将自定义排序器应用到列，如下所示：

$(function () {
    var sMap = {sorter:'main'};
    $("#rTable").tablesorter({
        headers: {
            2: sMap,
            3: sMap,
            4: sMap,
            5: sMap,
            6: sMap,
            7: sMap,
            8: sMap,
            9: sMap,
            10: sMap,
            11: sMap,
            12: sMap,
            13: sMap,
            14: sMap,
            15: sMap,
            16: sMap
        }
    });
});

Demo

Answer 2

您可以使用 textExtraction 轻松完成：

 var myTextExtraction = function(node) { 
    return node.textContent.replace(/\s/g, "").replace(/(^\d+)(.+$)/i,''); 
} 

$("#rTable").tablesorter({ 
    textExtraction: myTextExtraction
});

DEMO

忽略 div 元素的 Tablesorter 解析器

Tablesorter parser to ignore div element

html

javascript

jquery

tablesorter