javascript - 如何对json对象的数据进行排序并在html中相应显示？

Question

这是我的ajax:

$("form").on("submit", function () {
    var data = {
        "action": "test"
    };

    data = $(this).serialize() + "&" + $.param(data);
    $.ajax({
        type: "POST",
        dataType: "json",
        url: "ajax2.php",
        data: data,
        success: function (data) {


            $("#main_content").slideUp("normal",function(){

            //$(".the-return").html("<br />JSON: " + data+"<br/>");
            for (i = 0; i < data.length; i++) {


$(".the-return").append("<div class='inside_return'>Name:" + data[i].name + "<br/>Id:" + data[i].id + "<br/>Pricing:" + data[i].rate + "<br/>Postcode:" + data[i].postcode+ "<br/>Reputation:" + data[i].reputation+"<br/>Review Plus:" + data[i].plus+"<br/>Review Negative:" + data[i].neg+"<br/><h1>Availability</h1>Week Morning:" + data[i].weekM+"<br/>Week Afternoon:" + data[i].weekA+"<br/>Week Evening:" + data[i].weekE+"<br/>Weekend Morning:" + data[i].endM+"<br/>Weekend Afternoon:" + data[i].endA+"<br/>Week Evening:" + data[i].endE+"</div>");


            //alert(data[i].name) 
        }

            });
        }


    });
    return false;


});

上面是我的ajax。现在，默认情况下返回按邮政编码排序的查询结果。

现在当结果显示时，我想让用户按声誉、评论等对其进行排序。我该怎么做。

简单地说，我只需要更改查询中的 order by 子句，以便它可以根据用户选择进行排序。请问最简单的方法是什么？

我如何操作下面的部分，它将结果附加到名为 -the-return 的 div 中，以便它按用户使用的任何键进行排序？:Note-> 我在 <div> 中呈现结果 block 并且不在表中。

 $(".the-return").append("<div class='inside_return'>Name:" + data[i].name + "<br/>Id:" + data[i].id + "<br/>Pricing:" + data[i].rate + "<br/>Postcode:" + data[i].postcode+ "<br/>Reputation:" + data[i].reputation+"<br/>Review Plus:" + data[i].plus+"<br/>Review Negative:" + data[i].neg+"<br/><h1>Availability</h1>Week Morning:" + data[i].weekM+"<br/>Week Afternoon:" + data[i].weekA+"<br/>Week Evening:" + data[i].weekE+"<br/>Weekend Morning:" + data[i].endM+"<br/>Weekend Afternoon:" + data[i].endA+"<br/>Week Evening:" + data[i].endE+"</div>");

我尝试了什么:

success: function (data) {

//我用了一个函数来排序//

data.sort(function (a, b) {
    var retVal = 0;
    switch (sortOption) {
        case 1:
            retVal = a.property > b.property ? 1 : (a.property < b.property ? -1 : 0);
            break;
            // .... many cases here
    }
    return retVal;
});

//排序函数到此结束//

$("#main_content").slideUp("normal", function () {
    for (i = 0; i < data.length; i++) {

        $(".the-return").append("<div class='inside_return'>Name:" + data[i].name + "<br/>Id:" + data[i].id + "<br/>Pricing:" + data[i].rate + "<br/>Postcode:" + data[i].postcode + "<br/>Reputation:" + data[i].reputation + "<br/>Review Plus:" + data[i].plus + "<br/>Review Negative:" + data[i].neg + "<br/><h1>Availability</h1>Week Morning:" + data[i].weekM + "<br/>Week Afternoon:" + data[i].weekA + "<br/>Week Evening:" + data[i].weekE + "<br/>Weekend Morning:" + data[i].endM + "<br/>Weekend Afternoon:" + data[i].endA + "<br/>Week Evening:" + data[i].endE + "</div>");

    }

});

}

因此，当用户单击按钮时，它会触发排序功能。遗憾的是，它不起作用。成功放置该功能后，不会执行之前未进行任何排序的搜索功能。即使我把它放在函数之外，仍然不起作用。

Answer 1

要对数组进行排序，可以使用 Array.prototype.sort .

如果没有任何参数，它会尝试按字母顺序对元素进行排序，但您可以传入比较函数。

该函数将接收两个参数，并应返回小于 0、0 或大于 0 的值来定义参数 1 与参数 2 的关系。

您的排序函数应如下所示:

data.responseData.sort(function (a, b) {
    switch (sortOption) {
        case 1:
            a = a.name,
            b = b.name;
            type = "string";
        case 2:
            a = a.reputation,
            b = b.reputation;
            type = "numeric";
        // etc
    }
    if (type == "numeric")
    {
        // numeric comparison
        return a > b ? 1 : (a < b ? -1 : 0);
    } else if (type == "string") {

        // string comparison
        return a.localeCompare(b); 
    }
    // etc

    return;
});

localeCompare将为您比较字符串:)