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

Question

I have a table as below;

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

and a PHP file, ajax.php for AJAX calls as;

<?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;
?>

The PHP function is suppose to return an array with a limited number of elements with respect to $_POST["page"] like in pagination. The script will return first 5 elements for $page = 1 , second 5 elements for $page = 2 , etc..etc.. When page loads, the <td> s having id content may display 1,2,3,4 and 5 respectively.

When user click next , it may display next results and may return to previous result if user click prev . How can I do this using JavaScript using jQuery?

It will be more helpful if some effect is given when user clicks and data changes, like sliding (transition), so that it will look like sliding some bar.

Answer 1

Save yourself a TON of time. Use a pre-done grid solution like DataTables that does all this work for you. It allows you to sort, filter, paginate, order, and limit your table results that can be fed via the dom, JSON, or true server-side AJAX.

Since DataTables is such a mature project, it has already overcome all the random issues with cross-browser quirks, etc.

It also includes a pre-done PHP example with the query done for you. Just change to match your table, and voila!

Answer 2

This should help you get started:

<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();
    });
});

Notes:

• IDs should not be duplicated in a document, so I've given those cells the class 'content' instead.
• I don't fully understand your question, so I've assumed that the table is for paginated links, and you're loading in the content elsewhere.