Как создать динамические таблицы в WordPress с помощью AJAX

Автор: Игорь Фомин | Опубликовано: 07.04.2026

Динамические таблицы — это отличный способ представить структурированные данные на сайте WordPress, позволяя пользователям быстро фильтровать, сортировать и просматривать информацию без необходимости перезагрузки страницы. В этом материале мы разберём, как создать такую таблицу с помощью AJAX, что существенно улучшит пользовательский опыт и повысит производительность сайта.

Почему использовать AJAX для таблиц в WordPress

Традиционные таблицы, которые загружаются полностью при открытии страницы, могут быть неудобны, когда данных много. AJAX позволяет загружать данные порционно, обновлять их на лету и реагировать на действия пользователя без полной перезагрузки сайта.

Это актуально, когда нужно:

Фильтровать записи по категориям или меткам;
Сортировать данные по различным столбцам;
Реализовать постраничную навигацию (пагинацию);
Обновлять контент динамически на основе пользовательских запросов.

В WordPress AJAX реализуется через admin-ajax.php, что позволяет легко создавать динамические взаимодействия.

Создание динамической таблицы: структура и подготовка

Для примера создадим таблицу записей (постов) с фильтрацией по категории и пагинацией. В первую очередь добавим шорткод, который будет выводить таблицу и элементы управления фильтрами.

function wpboard_get_dynamic_table_shortcode() {
    ob_start();
    ?>
    <div id="wpboard-table-filters">
        <select id="wpboard-category-filter">
            <option value="">Все категории</option>
            <?php
            $categories = get_categories();
            foreach ($categories as $category) {
                echo '<option value="' . esc_attr($category->term_id) . '">' . esc_html($category->name) . '</option>';
            }
            ?>
        </select>
    </div>
    <div id="wpboard-table-container">
        <!-- Таблица будет загружена сюда -->
    </div>
    <?php
    wp_enqueue_script('wpboard-ajax-table-script', get_template_directory_uri() . '/js/wpboard-ajax-table.js', array('jquery'), null, true);
    wp_localize_script('wpboard-ajax-table-script', 'wpboardAjax', array(
        'ajaxurl' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wpboard_ajax_nonce'),
    ));
    return ob_get_clean();
}
add_shortcode('wpboard_dynamic_table', 'wpboard_get_dynamic_table_shortcode');

В данном коде создаётся селект для выбора категории и контейнер для таблицы. Сценарий JavaScript будет отвечать за отправку AJAX-запросов и обновление содержимого таблицы.

Обработка AJAX-запроса на сервере

Теперь создадим обработчик AJAX, который будет принимать параметры фильтра и страницы и возвращать HTML таблицы с нужными постами.

function wpboard_ajax_get_posts_table() {
    check_ajax_referer('wpboard_ajax_nonce', 'nonce');

    $category_id = isset($_POST['category']) ? intval($_POST['category']) : 0;
    $paged = isset($_POST['paged']) ? max(1, intval($_POST['paged'])) : 1;
    $posts_per_page = 10;

    $args = array(
        'post_type' => 'post',
        'posts_per_page' => $posts_per_page,
        'paged' => $paged,
    );

    if ($category_id) {
        $args['cat'] = $category_id;
    }

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        echo '<table class="wpboard-table">';
        echo '<thead><tr><th>Заголовок</th><th>Дата</th></tr></thead>';
        echo '<tbody>';
        while ($query->have_posts()) {
            $query->the_post();
            echo '<tr>';
            echo '<td><a href="' . get_permalink() . '">' . get_the_title() . '</a></td>';
            echo '<td>' . get_the_date() . '</td>';
            echo '</tr>';
        }
        echo '</tbody></table>';

        // Пагинация
        $max_pages = $query->max_num_pages;
        if ($max_pages > 1) {
            echo '<div class="wpboard-pagination">';
            for ($i = 1; $i <= $max_pages; $i++) {
                $class = ($i === $paged) ? 'current' : '';
                echo '<a href="#" class="wpboard-page ' . $class . '" data-page="' . $i . '">' . $i . '</a>';
            }
            echo '</div>';
        }
    } else {
        echo '<p>Нет записей для отображения.</p>';
    }
    wp_reset_postdata();
    wp_die();
}
add_action('wp_ajax_wpboard_get_posts_table', 'wpboard_ajax_get_posts_table');
add_action('wp_ajax_nopriv_wpboard_get_posts_table', 'wpboard_ajax_get_posts_table');

Обработчик получает категорию и номер страницы, формирует WP_Query, выводит таблицу и пагинацию. Если записей нет — выводит сообщение.

JavaScript для управления AJAX-запросами и обновлением таблицы

Теперь добавим скрипт, который будет обрабатывать выбор категории и переключение страниц, отправляя AJAX-запросы и подставляя полученный HTML в контейнер.

jQuery(document).ready(function($) {
    function wpboardLoadTable(category = '', paged = 1) {
        $.ajax({
            url: wpboardAjax.ajaxurl,
            type: 'POST',
            data: {
                action: 'wpboard_get_posts_table',
                nonce: wpboardAjax.nonce,
                category: category,
                paged: paged
            },
            beforeSend: function() {
                $('#wpboard-table-container').html('<p>Загрузка...</p>');
            },
            success: function(response) {
                $('#wpboard-table-container').html(response);
            },
            error: function() {
                $('#wpboard-table-container').html('<p>Ошибка загрузки данных.</p>');
            }
        });
    }

    // Загрузка таблицы при изменении фильтра
    $('#wpboard-category-filter').on('change', function() {
        var category = $(this).val();
        wpboardLoadTable(category, 1);
    });

    // Загрузка таблицы при клике на страницу пагинации
    $(document).on('click', '.wpboard-page', function(e) {
        e.preventDefault();
        var page = $(this).data('page');
        var category = $('#wpboard-category-filter').val();
        wpboardLoadTable(category, page);
    });

    // Инициализация - загрузка первой страницы без фильтра
    wpboardLoadTable();
});

Этот скрипт:

Отслеживает выбор категории и вызывает функцию загрузки таблицы с новым фильтром;
Обрабатывает клики по номерам страниц и подгружает соответствующую страницу таблицы;
Показывает сообщение о загрузке и обрабатывает ошибки.

Дополнительные возможности: сортировка и расширение функционала

Для более удобной работы можно добавить сортировку по столбцам. Это требует передачи параметров сортировки в AJAX-запрос и изменения WP_Query, например, добавив orderby и order.

Также полезно интегрировать сторонние плагины для таблиц, например, ABC Pagination для удобной навигации или WPRemark для улучшения комментариев в таблицах с отзывами.

Также стоит позаботиться о безопасности, используя nonce и проверку прав в AJAX-обработчиках, чтобы избежать несанкционированных запросов.

Итоги и рекомендации по оптимизации

Создание динамических таблиц с AJAX в WordPress — мощный инструмент для отображения и управления большими объемами данных. Это повышает удобство пользователей и снижает нагрузку на сервер.

Рекомендуется:

Использовать кеширование данных, например, с помощью transient API для часто запрашиваемых таблиц;
Минимизировать объем передаваемых данных, используя пагинацию и фильтры;
Тестировать работу на мобильных устройствах и минимизировать время отклика.

Таким образом, вы получите современный, отзывчивый интерфейс для работы с таблицами на WordPress, который легко расширять и настраивать под задачи проекта.