PHP AJAX 排序数组无需重新加载页面

Question

我有以下代码，它对 XML 文件运行查询并返回结果。然后我使用 usort 对它进行排序。 (我的排序函数位于单独的页面 sort.php 上)。我现在已经注释掉了 usort，但 usort 函数按其预期工作。

$xml = simplexml_load_file($url);

//RUN QUERY ON XML
$xQuery = $xml->xpath($query);

//DISPLAY RESULTS OF QUERY

$i = 0;
//usort($xQuery, 'sortMake');
    for ($f = 0; $f <= 9; $f++) {               
        ?>
            <img src= "<?php echo $xQuery[$i]->MainPhoto;?>"><br />
            MAKE:  <?php echo $xQuery[$i]->Make;?><br />
            Model: <?php echo $xQuery[$i]->Model;?><br />
            $i++;


    <?php } ?>

所以上面的代码会显示所有未排序的内容。我希望在循环之前有一个排序链接，单击该链接将对数组进行排序并显示它，而无需重新加载整个页面。我知道它可能与 AJAX 有关，但我发现的所有 AJAX 资源都是使用 MySQL 的函数示例。我没有使用 MySQL。

如有任何帮助，我们将不胜感激。谢谢。

Answer 1

您可以在页面上进行排序，无需 AJAX 或 PHP 排序。您需要稍微修改您的 HTML。将结果放入具有 id 的父元素中。将每个结果放入一个带有类的 div 中。将要排序的数据放入带有类的跨度中:

<div id="carList">
    <div class="car">
        <img src= "<?php echo $xQuery[$i]->MainPhoto;?>"><br />
        MAKE:  <span class="make"><?php echo $xQuery[$i]->Make;?></span><br />
        Model: <span class="model"><?php echo $xQuery[$i]->Model;?></span><br />
        $i++;
    </div>
    ...
</div>

要对元素进行排序，首先将它们放入数组中:

var listEl = $("#carList");
var cars = listEl.children(".car").get();

然后对您的Array调用.sort()。您将创建一个自定义比较函数以传递给 .sort():

cars.sort(function (a, b) {
    var aMake = $(a).find(".make").text();
    var bMake = $(b).find(".make").text();
    return a - b;
});

现在，只需将元素附加回父元素即可:

listEl.append(cars);

演示: http://jsfiddle.net/gilly3/ZNmEh/