Populate table contents from PHP array using AJAX

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.

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

bpeterson76 · Accepted Answer · 2011-06-17 15:26:01Z

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

answered Jun 17, 2011 at 15:26

bpeterson76

12.9k6 gold badges51 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

karim79 · Accepted Answer · 2011-06-17 15:22:04Z

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.

Hi @karim79, if the php file for ajax processing has a name ajax.php, how can I do this?? Check my revised question.. thanks for your corrections..

Collectives™ on Stack Overflow

Populate table contents from PHP array using AJAX

2 Answers 2

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Related