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

bla*_*d Ψ 5 javascript php ajax jquery html-table

我有一张桌子如下;

<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>
Run Code Online (Sandbox Code Playgroud)

和一个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;
?>
Run Code Online (Sandbox Code Playgroud)

PHP函数假设返回一个数组有限的元素,$_POST["page"]就像分页一样.该脚本将返回前5个元素$page = 1,其中5个元素为$page = 2,等等.当页面加载时,<td>具有id 的s content可以分别显示1,2,3,4和5.当用户点击时next,它可能会显示下一个结果,如果用户点击,可能会返回上一个结果prev.如何在jQuery的帮助下使用Javascript做到这一点?

如果在用户点击和数据更改时给出一些效果会更有帮助,比如滑动(过渡),这样看起来就像滑动一些吧.

bpe*_*n76 5

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

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

它还包括一个预先完成的PHP示例,为您完成查询.只需改变以匹配你的桌子,瞧!