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个元素等等。当页面加载时，可能会显示标识为<td>的{{1}}分别为1,2,3,4和5。当用户点击content时，它可能会显示下一个结果，如果用户点击next，则可能会返回上一个结果。如何在jQuery的帮助下使用Javascript实现这一点？

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

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

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

2 个答案: