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

Posted 2023-02-19

【中文标题】如何使用 jquery/ajax 对已经从数据库中获取的数据进行排序？

【英文标题】：How to sort data already fetched from database with 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”将是您通过的任何内容。编辑：当然这是不可能的，因为您的数据将是巨大的。

【参考方案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 个参数进行排序。您可能必须使用开关或其他东西来选择正确的比较功能，而不是像您尝试使用的那样使用动态比较功能。