javascript - Populate table contents from PHP array using AJAX - Stack Overflow

admin管理员组

文章数量:1417555

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.

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.

• javascript
• php
• jquery
• ajax
• html-table

Share Improve this question Follow edited Jun 11, 2021 at 7:08 halfer 20.4k1919 gold badges109109 silver badges202202 bronze badges asked Jun 17, 2011 at 15:09 AlfredAlfred 21.4k6363 gold badges174174 silver badges257257 bronze badges 1

• $selectedFiles is an array, use echo json_encode($selectedFiles);. Ensuring your AJAX call in jQuery is expecting a JSON response of course. – Orbling Commented Jun 17, 2011 at 15:12

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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

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.

本文标签： javascriptPopulate table contents from PHP array using AJAXStack Overflow