如何使用 jquery/ajax 对已经从数据库中获取的数据进行排序？答案

【问题标题】：How to sort data already fetched from database with jquery/ajax?如何使用 jquery/ajax 对已经从数据库中获取的数据进行排序？
【发布时间】：2015-07-17 16:30:47
【问题描述】：

以下是我使用过滤器获取数据的查询：

$statement = $pdo->prepare("SELECT * FROM posts WHERE subid IN (:key2) AND Poscode=:postcode2 AND pricing=:rate2");
    $statement->execute(array(':key2' => $key2,':postcode2'=>$postcode,':rate2'=>$rate));
 // $row = $statement->fetchAll(PDO::FETCH_ASSOC);
  $json = array();
 while( $row = $statement->fetch()) {

     array_push($json, array("name" => $row['Name'], "id" => $row['PostUUID'],"rate" => $row['pricing'],"reputation" => $row['Reputation'],"plus" => $row['ReviewPlus'],"neg" => $row['ReviewNeg'],"weekM" => $row['week_morning'],"weekA" => $row['week_afternoon'],"weekE" => $row['week_evening'],"endM" => $row['weekend_morning'],"endA" => $row['weekend_afternoon'],"endE" => $row['weekend_evening']));
 }

    header('Content-Type: application/json');

    echo json_encode($json);

这是我的ajax

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

    data = $(this).serialize() + "&" + $.param(data);
    $.ajax({
        type: "POST",
        dataType: "json",
        url: "ajax2.php", //Relative or absolute path to response.php file
        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 + "Pricing:" + data[i].rate + "<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;


});

现在我已经有数据显示在指定的页面中过滤器，意味着他的结果必须与subid，poscode和从用户输入中收集的速率。

我让用户按评论、排名对已经获取的数据进行排序等等......它必须是swift（ajax）。但是我该怎么做呢？能请大家给个思路。

结果不是表格行形式，而是显示在 div 中每条记录块。

我如何使用 jquery 来实现这一点，比如如果用户点击了“排序依据” 排名”。

我有一些想法：而不是向每个用户发送一个新的查询到数据库排序，我如何循环遍历上面 json 中接收到的数据数组然后从那里排序？

$('#rank').on("click", function(){ //how to sort here});

编辑部分：

参考此链接：Sorting an array of JavaScript objects

我正在尝试类似的东西：

var sort_by = function(field, reverse, primer){

   var key = primer ? 
       function(x) {return primer(x[field])} : 
       function(x) {return x[field]};

   reverse = !reverse ? 1 : -1;

   return function (a, b) {
       return a = key(a), b = key(b), reverse * ((a > b) - (b > a));
     } 
}

// Sort by price high to low
data.sort(sort_by('rate', true, parseInt));

// Sort by city, case-insensitive, A-Z
data.sort(sort_by('Name', false, function(a){return a.toUpperCase()}));

但它不起作用，有人可以帮忙吗？

【问题讨论】：

查看此链接以了解如何对 json 值进行排序。但是，当您引入所有条件时，这将变得非常复杂......sorting ajax json elemnts
@HarigovindR，感谢您的链接，我正在尝试这样的事情：homes.sort(function(a,b) { return parseFloat(a.price) - parseFloat(b.price) } );..........但当然不工作;如果您知道如何在整个结果中以这种方式排序，请与您联系。..
您是否有可能将排序详细信息与 ajax 查询一起传递？像 {field: id, order:DESC} ？这真的会为您简化流程。
@Reasurria ，您的意思是在这样的查询中？ $statement = $pdo->prepare("SELECT * FROM posts WHERE subid IN (:key2) AND Poscode=:postcode2 AND pricing=:rate2 ORDER BY Poscode DESC LIMIT 60");
@sherly 是的。然后，您可以根据发送到脚本的排序详细信息动态构建查询。因此，“Poscode”将是您通过的任何内容。编辑：当然这是不可能的，因为您的数据将是巨大的。

标签： javascript php jquery mysql ajax

【解决方案1】：

此解决方案尝试使用内置排序。

// I assume in the code that there are 2 properties "name" and "rating".

// a and b are of the same type as the data
function ratingComparer(a, b)
{
   if(parseInt(a.rating) < parseInt(b.rating))
     return -1;
   if(parseInt(a.rating) > parseInt(b.rating))
     return 1;

   return 0;
}

function nameComparer(a,b)
{
    // Same thing as with rating except we do string comparisons with a.name
    // and b.name
}

//Sort by rating
data.sort(ratingComparer);

// Sort by name
data.sort(nameComparer);

请参阅此https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort 链接。我认为示例部分正上方的部分与您的情况特别相关。

编辑：我认为您的实现的问题是比较函数需要对类型的 2 个参数进行排序。您可能必须使用开关或其他东西来选择正确的比较功能，而不是像您尝试使用的那样使用动态比较功能。

【讨论】：