使用 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>

还有一个 PHP 文件，ajax.php 用于 AJAX 调用；

<?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 的<td>s 可能会显示1、2、3、4 和5个。

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

如果在用户点击和数据发生变化的时候给出一些效果会更有帮助，比如滑动（transition），让它看起来像滑动了一些bar。

Answer 1

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

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

它还包括一个pre-done PHP example，其中包含为您完成的查询。只需更改以匹配您的桌子，瞧！

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 不应在文档中重复，因此我将这些单元格指定为“内容”类。
• 我不完全理解您的问题，因此我假设该表格用于分页链接，而您正在其他地方加载内容。