使用 AJAX 从 PHP 数组填充表内容

Question

我有一张桌子如下；

<table>
<tr>
<td id="prev">prev</td>
<td class="content"></td>
<td class="content"></td>
<td class="content"></td>
<td class="content"></td>
<td class="content"></td>
<td id="next">next</td>
</tr>
</table>

和一个用于 AJAX 调用的 PHP 文件 ajax.php；

<?php
$array = array(1,2,3,4,5,6,7,8,9,10);
$page = $_POST["page"];
$quantity = 5;
$offset = ($page-1)*$quantity;
$selectedFiles = array_slice($array, $offset, $quantity);
echo $selectedFiles;
?>

PHP 函数应该返回一个与 $_POST["page"] 相关的元素数量有限的数组，就像分页一样。该脚本将返回 $page = 1 的前 5 个元素，$page = 2 的后 5 个元素，等等。当页面加载时，具有 id content 的 可以分别显示 1、2、3、4 和 5。

当用户点击下一个时，可能会显示下一个结果，如果用户点击上一个，可能会返回到上一个结果。我如何使用 JavaScript 和 jQuery 来做到这一点？

如果在用户点击和数据变化时给出一些效果，比如滑动（过渡），这样看起来就像滑动某个栏，那就更有帮助了。

Answer 1

为自己节省大量时间。使用预先完成的网格解决方案（例如 DataTables）来为您完成所有这些工作。它允许您对可通过 dom、JSON 或真正的服务器端 AJAX 提供的表结果进行排序、过滤、分页、排序和限制。

由于DataTables是一个如此成熟的项目，它已经克服了跨浏览器怪癖等所有随机问题。

它还包括一个 预先完成的 PHP 示例，其中包含为您完成的查询。只需更改以匹配您的桌子即可，瞧！

Answer 2

这应该可以帮助您开始：

<table id="pageLinks">
<tr>
<td id="prev">prev</td>
<td class="content">1</td>
<td class="content">2</td>
...
<td id="next">next</td>
</tr>
</table>

var currPage = 1;
$("#pageLinks tr td").click(function() {
    if($(this).hasClass("content")) {
        var currPage = $(this).text();
    } else {
        if(this.id == "next") {
            currPage++;
        } else {
            if(currPage > 1)
                currPage--;
        }
    }
    $.post("script.php", {currPage: currPage}, function(html) {
        $("#someDiv").hide().html(html).slideUp();
    });
});

注意：

• ID 不应在文档中重复，因此我为这些单元格指定了“内容”类。
• 我不完全理解你的问题，所以我假设该表用于分页链接，并且你正在其他地方加载内容。