需要一个更智能的 jQuery 表格排序功能答案

【问题标题】：Need a smarter jQuery table sort function需要一个更智能的 jQuery 表格排序功能
【发布时间】：2018-10-24 15:57:49
【问题描述】：

我正在使用来自另一个 stackoverflow 问题的以下代码：

$('th').click(function(){
    var table = $(this).parents('table').eq(0)
    var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
    this.asc = !this.asc
    if (!this.asc){rows = rows.reverse()}
    for (var i = 0; i < rows.length; i++){table.append(rows[i])}
})
function comparer(index) {
    return function(a, b) {
        var valA = getCellValue(a, index), valB = getCellValue(b, index)
        return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB)
    }
}
function getCellValue(row, index){ return $(row).children('td').eq(index).text() }

table, th, td {
    border: 1px solid black;
}
th {
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr><th>Country</th><th>Pick</th><th>Size</th></tr>
    <tr><td>France</td><td>2</td><td>25</td></tr>
    <tr><td><a href=#>spain</a></td><td>-</td><td></td></tr>
    <tr><td>Lebanon</td><td>1</td><td>-17</td></tr>
    <tr><td>Argentina</td><td>DH</td><td>100</td></tr>
    <tr><td>USA</td><td>-</td><td>-6</td></tr>
</table>

这对大多数数据都很有效。我的问题是“选择”列。我希望它看起来像这样：

Pick
1
2
DH
-
-

我假设这是我需要修改的比较器函数。我该如何修改它，以便它基本上总是将“-”放在表格的底部，然后将数字从最低到最高排序，并在数字下方使用“DH”？这是对功能的一个非常简单的补充吗？还是大量的自定义代码？

【问题讨论】：

@ibrahimmahrir - 我不确定 OP 会不会对此感到满意。字符串排序将排序 1、10、11、2、21 等。而数字排序（如已完成）不会这样做。
是否可以将单元格值设置为未定义？我引用文档进行排序：“所有未定义的元素都排序到数组的末尾。”

标签： javascript jquery sorting html-table

【解决方案1】：

您可以在比较器中添加一些自定义逻辑。

我在下面的 sn-p 中更改的唯一部分是 function comparer(index) 内容。

$('th').click(function(){
    var table = $(this).parents('table').eq(0)
    var rows = table.find('tr:gt(0)').toArray().sort(comparer($(this).index()))
    this.asc = !this.asc
    if (!this.asc){rows = rows.reverse()}
    for (var i = 0; i < rows.length; i++){table.append(rows[i])}
})
function comparer(index) {
    return function(a, b) {
        var valA = getCellValue(a, index), valB = getCellValue(b, index);
        
        if (valA === "-") valA = Number.MAX_SAFE_INTEGER;
        if (valB === "-") valB = Number.MAX_SAFE_INTEGER;
        if (valA === "DH") valA = Number.MAX_SAFE_INTEGER - 1;
        if (valB === "DH") valB = Number.MAX_SAFE_INTEGER - 1;

        return $.isNumeric(valA) && $.isNumeric(valB) ? valA - valB : valA.toString().localeCompare(valB)
    }
}
function getCellValue(row, index){ return $(row).children('td').eq(index).text() }

table, th, td {
    border: 1px solid black;
}
th {
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr><th>Country</th><th>Pick</th><th>Size</th></tr>
    <tr><td>France</td><td>2</td><td>25</td></tr>
    <tr><td><a href=#>spain</a></td><td>-</td><td></td></tr>
    <tr><td>Lebanon</td><td>1</td><td>-17</td></tr>
    <tr><td>Argentina</td><td>DH</td><td>100</td></tr>
    <tr><td>USA</td><td>-</td><td>-6</td></tr>
</table>

【讨论】：