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

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

Почему динамические таблицы важны в WordPress

Статичные таблицы не позволяют пользователям быстро получить нужную информацию без обновления страницы. Использование AJAX позволяет загружать и обновлять данные на лету, без перезагрузки, что улучшает UX и снижает нагрузку на сервер. Кроме того, шорткоды позволяют легко вставлять таблицы в любой пост или страницу, делая решение универсальным и гибким.

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

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

Начнем с регистрации шорткода и подготовки контейнера для таблицы, а также подключения скрипта с AJAX-запросом.

В файл functions.php вашей темы (лучше дочерней) добавьте следующий код:

function wpzen_dynamic_table_shortcode() {
    ob_start();
    ?>
    <div id="wpzen-dynamic-table-container">
        <button id="wpzen-refresh-table">Обновить таблицу</button>
        <table id="wpzen-table" border="1" cellpadding="5" cellspacing="0">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Название</th>
                    <th>Дата</th>
                </tr>
            </thead>
            <tbody>
                <tr><td colspan="3">Загрузка данных...</td></tr>
            </tbody>
        </table>
    </div>
    <?php
    return ob_get_clean();
}
add_shortcode('wpzen_dynamic_table', 'wpzen_dynamic_table_shortcode');

function wpzen_enqueue_scripts() {
    wp_enqueue_script('wpzen-dynamic-table-js', get_stylesheet_directory_uri() . '/js/wpzen-dynamic-table.js', array('jquery'), null, true );
    wp_localize_script('wpzen-dynamic-table-js', 'wpzen_ajax_object', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wpzen_dynamic_table_nonce')
    ));
}
add_action('wp_enqueue_scripts', 'wpzen_enqueue_scripts');

function wpzen_handle_ajax_request() {
    check_ajax_referer('wpzen_dynamic_table_nonce', 'security');

    // Пример выборки данных — можно заменить на свои
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => 5,
        'orderby' => 'date',
        'order' => 'DESC'
    );
    $query = new WP_Query($args);

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            echo '<tr>';
            echo '<td>' . get_the_ID() . '</td>';
            echo '<td>' . get_the_title() . '</td>';
            echo '<td>' . get_the_date() . '</td>';
            echo '</tr>';
        }
    } else {
        echo '<tr><td colspan="3">Нет данных</td></tr>';
    }
    wp_die();
}
add_action('wp_ajax_wpzen_load_table', 'wpzen_handle_ajax_request');
add_action('wp_ajax_nopriv_wpzen_load_table', 'wpzen_handle_ajax_request');

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

Создайте файл wpzen-dynamic-table.js в папке js вашей темы и вставьте следующий код:

jQuery(document).ready(function($) {
    function wpzen_load_table_data() {
        $.ajax({
            url: wpzen_ajax_object.ajax_url,
            type: 'POST',
            data: {
                action: 'wpzen_load_table',
                security: wpzen_ajax_object.nonce
            },
            beforeSend: function() {
                $('#wpzen-table tbody').html('<tr><td colspan="3">Загрузка данных...</td></tr>');
            },
            success: function(response) {
                $('#wpzen-table tbody').html(response);
            },
            error: function() {
                $('#wpzen-table tbody').html('<tr><td colspan="3">Ошибка при загрузке данных</td></tr>');
            }
        });
    }

    // Загрузка данных при загрузке страницы
    wpzen_load_table_data();

    // Обновление по кнопке
    $('#wpzen-refresh-table').on('click', function(e) {
        e.preventDefault();
        wpzen_load_table_data();
    });
});

Как использовать шорткод на сайте

Просто вставьте в редактор WordPress ваш шорткод [wpzen_dynamic_table] в нужное место страницы или записи. При загрузке страницы будет выполнен AJAX-запрос, и таблица заполнится последними постами.

Кнопка «Обновить таблицу» позволяет вручную перезагрузить данные без полной перезагрузки страницы, что удобно при работе с динамическими данными.

Расширение функционала: фильтрация и пагинация

Для более сложных случаев можно добавить фильтры — например, по категориям, датам или мета-полям. Для этого нужно расширить HTML формы на фронтенде и обрабатывать параметры в PHP-функции wpzen_handle_ajax_request().

Для пагинации стоит передавать номер страницы в AJAX и использовать параметр 'paged' в WP_Query. Это позволит делать таблицу удобной для большого количества данных.

Пример добавления фильтра категории:

<select id="wpzen-category-filter">
    <option value="">Все категории</option>
    <?php
    $categories = get_categories();
    foreach ($categories as $cat) {
        echo '<option value="' . $cat->term_id . '">' . esc_html($cat->name) . '</option>';
    }
    ?>
</select>

И передавать выбранное значение в AJAX-запрос, а на сервере добавлять в WP_Query параметр cat.

Полезные плагины для работы с таблицами в WordPress

Если не хотите писать код, можно использовать плагины, которые упрощают управление динамическими таблицами:

• WPRemark — мощный инструмент создания отзывов и таблиц с фильтрами и AJAX.
• ABC Pagination — плагин для гибкой пагинации, отлично сочетается с динамическими таблицами.

Оба плагина позволяют быстро настроить функционал без глубокого программирования, но при этом имеют API для расширения.