没有重新加载页面的PHP AJAX排序数组

时间:2012-06-08 18:31:46

标签: php jquery ajax arrays sorting

我有以下代码在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。

任何帮助将不胜感激。感谢。

2 个答案:

答案 0 :(得分:3)

您可以在页面上对其进行排序,而无需进行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>

要对元素进行排序,请先将它们放在Array

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

然后在.sort()上致电Array。您将创建一个自定义比较函数以传递给.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/

答案 1 :(得分:1)

结帐jQuery's .get() function。至少应该让你指向正确的方向。 jQuery是一个Javascript库,绝对可以用于您的目的。仅Javascript也可以完成任务,但jQuery的目标是通过最小化您必须执行的编码量来简化您的生活。您必须在<head>标记中下载或引用jQuery库。如果你真的想开始使用jQuery,你一定应该阅读选择器及其使用方法。

个人我喜欢jQuery并使用过其他几个库。我发现jQuery非常适合初学者,在线文档非常棒。它拥有庞大的用户群,可以为您解答任何问题。

基本上,您需要将显示的数据包装在jQuery能够找到的标记中,即:

<a href='#' id='link'>Sort Data</a>
<div id='xmlData'>...DATA...</div>`

然后有你的脚本:

$("#link").click(function(){
    $.get('xmldata.php',function(d){
        $('#xmlData').html(d);
    });
});

然后有一个名为xmldata.php的脚本,内容为:

$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 } ?>