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

Posted 2023-03-05

【中文标题】使用 AJAX 从 PHP 数组填充表格内容

【英文标题】：Populate table contents from PHP array using AJAX

【发布时间】：2011-09-17 06:54:23

【问题描述】：

我有一张如下表；

<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。

【问题讨论】：

$selectedFiles 是一个数组，使用echo json_encode($selectedFiles);。确保您在 jQuery 中的 AJAX 调用当然期待 JSON 响应。

【参考方案1】：

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

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

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

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

【讨论】：

嗨@karim79，如果用于ajax 处理的php 文件有一个名称ajax.php，我该怎么做？检查我修改后的问题..感谢您的更正..