在升序和降序之间切换对列进行排序答案

【问题标题】：Toggle sorting a column between ascending and descending在升序和降序之间切换对列进行排序
【发布时间】：2012-10-14 22:37:21
【问题描述】：

假设我有一个包含字段的表格

Rank、Id 和 Name

点击 Rank 后，表格会使用此代码按等级升序排序

$(function() {
    $("#rank").click(function() {
        var rows = $("#rank_table tbody tr").get();
        rows.sort(sortTable);
        $.each(rows, function(index, row) {
            $("#rank_table").children("tbody").append(row);
        });
    });
});

function sortTable(a, b) {
    var A = parseInt($(a).children('td').eq(0).text());
    var B = parseInt($(b).children('td').eq(0).text());
    if (A < B) return -1;
    if (A > B) return 1;
    return 0;
}

Rank 和 Id 是整数，id 分别为 rank 和 st_id。所以，我想要实现的是，当我单击 Rank 字段一次时，表格会按升序排序，再次单击它会按降序对表格进行排序。

我想对rank 和Id 这两个字段都这样做。对于降序，我是否需要使用其他函数而不是升序这个升序函数。

如何使用 jQuery 和 sort() function(not plugins) 来实现这一点？

这里是html

<!Doctype html>
<html>
<head>
    <style>
        #thead {
            cursor: pointer;
            text-decoration: underline;
            text-align: center;
        }

        #tbody {
            text-align: center;
        }
    </style>
    <script src="libs/jquery-1.5.1.js" type="text/javascript"></script>
    <script src="table_sort.js" type="text/javascript"></script>
</head>

<body>
    <table id="rank_table">
        <thead id="thead">
            <tr>
                <th id="rank">Rank</th>
                <th id="st_id">Student_id</th>
                <th id="st_name">Name</th>
            </tr>
        </thead>
        <tbody id="tbody">
            <tr>
                <td>3</td>
                <td>2</td>
                <td>Ted</td>
            </tr>
            <tr>
                <td>2</td>
                <td>1</td>
                <td>John</td>
            </tr>
            <tr>
                <td>5</td>
                <td>4</td>
                <td>Neil</td>
            </tr>
            <tr>
                <td>1</td>
                <td>5</td>
                <td>Alex</td>
            </tr>
            <tr>
                <td>4</td>
                <td>3</td>
                <td>Nave</td>
            </tr>
        </tbody>
    </table>

</body>

</html>

【问题讨论】：

最简单的方法是在您的可排序列上设置一个数据属性或类名，以指示它当前的排序方式。然后，在您的点击处理程序中，检查当前排序是什么并选择当时使用的排序函数（并更新属性/类）。
类似@Shmiddty code if($("#rank")).hasClass('desc')){ return (A == B ? 0 : (A > B ? 1 ：-1））； $("#rank").removeClass('desc'); $("#rank").addClass('asc'); } else { return (A == B ? 0 : (A > B ? 1 : -1)); $("#rank").removeClass('asc'); $("#rank").addClass('desc'); }code
当它应该按降序排序时，可以像调用rows.reverse()一样简单。
是的，这是一个很好的选择。

标签： javascript jquery sorting html-table

【解决方案1】：

我可能会将其重写为：http://jsfiddle.net/gQNPt/1/

$(".sortable").click(function(){
    var o = $(this).hasClass('asc') ? 'desc' : 'asc';
    $('.sortable').removeClass('asc').removeClass('desc');
    $(this).addClass(o);

    var colIndex = $(this).prevAll().length;
    var tbod = $(this).closest("table").find("tbody");
    var rows = tbod.find("tr");

    rows.sort(function(a,b){
        var A = $(a).find("td").eq(colIndex).text();
        var B = $(b).find("td").eq(colIndex).text();

        if (!isNaN(A)) A = Number(A);
        if (!isNaN(B)) B = Number(B);

        return o == 'asc' ? A > B : B > A;
    });

    $.each(rows, function(index, ele){
        tbod.append(ele);
    });
});

HTML

<table id="fruits">
    <thead>
        <tr>
            <th class="sortable asc">ID</th>
            <th class="sortable">Name</th>
            <th class="sortable">Rank</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>0</td>
            <td>Banana</td>
            <td>15</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Pear</td>
            <td>3</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Orange</td>
            <td>6</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Apple</td>
            <td>14</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Mango</td>
            <td>99</td>
        </tr>
    </tbody>
</table>

然后，您可以通过将“可排序”类添加到列标题来控制哪些列是可排序的。

【讨论】：

作为奖励，这可以用于任何格式良好的表格。
我非常需要这样的东西，谢谢分享！

【解决方案2】：

如果您当前的函数按升序排序，您只需要更改 if 语句即可使其降序排列？

if (A > B) return -1;
if (A < B) return 1;

这是你想要的方式：

$(function() {
    $("#rank").on('click', function() {
        var rows = $("#rank_table tbody tr").get();
        rows.sort(sortTable);
        $.each(rows, function(index, row) {
            $("#rank_table").children("tbody").append(row);
        });
        if (ascending) {
            ascending = false;
        } else {
            ascending = true;
        }
    });
});

var ascending = false;

function sortTable(a, b) {
    var A = parseInt($(a).children('td').eq(0).text(), 10);
    var B = parseInt($(b).children('td').eq(0).text(), 10);


    if (ascending) {
        if (A > B) return 1;
        if (A < B) return -1;
    } else {
        if (A > B) return -1;
        if (A < B) return 1;
    }
    return 0;

}

【讨论】：

我知道，但是如何使“排名”按钮切换到此功能
它应该可以工作，但不知道为什么它不工作，列没有按降序排序。
能否请您也添加用于此目的的 html？
@Alonso 嘿伙计，检查我的最终编辑。我已经对其进行了测试，现在可以使用：jsbin.com/iqefoz/2/edit
if (ascending) { ascending = false; } else { ascending = true; } 呃...ascending = !ascending?