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

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

2 Answers 2

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.