切换列排序的升序和降序

Question

切换列排序的升序和降序

7

假设我有一张表格，其中包含字段 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和st_id是整数，其中id小于rank。所以，我想实现的是当我点击Rank字段一次时，表格按升序排序，再次点击时按降序排序。

我想对rank和Id两个字段都这样做。对于降序，我需要使用不同于升序的函数吗？

如何使用jQuery和此sort()函数（而非插件）来实现这一点？

以下是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>

- Alonso

最简单的方法是，在可排序列上设置一个数据属性或类名称，指示它当前的排序方式。然后，在点击事件处理程序中，检查当前的排序方式，并选择相应的排序函数(并更新属性/类)。 - Shmiddty

类似这样的 @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 - Alonso

1

可能只需要调用 rows.reverse() 就可以将其按降序排序了。 - Shmiddty

是的，这是一个不错的选择。 - Alonso

2个回答

3

如果您当前的函数按升序排序，那么只需要更改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;

}

- Angelo A

1

我知道，但是如何使“排名”按钮切换到这个功能？ - Alonso

它应该可以工作，但不知道为什么它没有工作，列没有按降序排序。 - Alonso

请问您能同时添加您所使用的HTML代码吗？ - Angelo A

@Alonso 嘿，伙计，看看我的最终编辑。我已经测试过了，现在它可以工作：http://jsbin.com/iqefoz/2/edit - Angelo A

1

如果（升序）{ 升序 = 假; } else { 升序 = 真; }嗯... 升序 =！升序？ - punund

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shmiddty · Accepted Answer

我会将它重新写成这样：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>

你可以通过在列标题上添加"class = sortable"来控制哪些列可以排序。