Заполнить содержимое таблицы из массива PHP с помощью AJAX

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"], как при разбиении на страницы. Скрипт вернет первые 5 элементов для $page = 1, вторые 5 элементов для $page = 2 и т. Д. И т. Д. При загрузке страницы <td> с идентификатором content могут отображать 1,2,3,4 и 5 соответственно. Когда пользователь нажимает next, он может отображать следующие результаты и может возвращаться к предыдущему результату, если пользователь нажимает prev. Как я могу сделать это, используя Javascript с помощью jQuery ??

Будет более полезно, если при щелчках пользователя и при изменении данных будет получен некоторый эффект, например скольжение (переход), чтобы оно выглядело как скольжение некоторой полосы.

Answer 1

Сэкономьте ТОННУ времени. Используйте готовое сеточное решение, такое как DataTables , которое сделает всю эту работу за вас. Он позволяет вам сортировать, фильтровать, разбивать на страницы, упорядочивать и ограничивать результаты таблицы, которые можно подавать через dom, JSON или настоящий серверный AJAX.

Поскольку DataTables является настолько зрелым проектом, он уже преодолел все случайные проблемы с кросс-браузерными причудами и т. Д.

Он также включает готовый пример PHP с запросом, выполненным для вас. Просто изменитесь, чтобы соответствовать вашему столу, и вуаля!

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

Примечания:

• Идентификаторы не должны дублироваться в документе, поэтому я дал этим ячейкам содержимое класса'вместо.
• Я не до конца понимаю ваш вопрос, поэтому я предположил, что таблица предназначена для разбитых на страницы ссылок, а вы загружаете контент в другом месте.