Как создать динамическую отображающуюся таблицу в WordPress с помощью shortcode

Автор: Вадим Титов | Опубликовано: 12.02.2026

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

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

Статичные таблицы — это просто HTML-код, который не меняется без обновления страницы. Но что если данные нужно обновлять автоматически или по запросу пользователя? Например, показывать список последних заказов, статистику, или результаты опроса.

Использование AJAX в WordPress позволяет:

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

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

Создание shortcode для вывода таблицы с динамическими данными

Начнём с регистрации shortcode и создания базовой таблицы. В коде ниже показано, как это сделать в файле functions.php вашей темы или в отдельном плагине.

function wptool_dynamic_table_shortcode() {
    // HTML контейнер для таблицы
    $output = '<div id="wptool-dynamic-table">Загрузка данных...</div>';

    // Подключаем скрипт для AJAX
    wp_enqueue_script('wptool-table-script', get_stylesheet_directory_uri() . '/js/wptool-table.js', array('jquery'), '1.0', true);

    // Локализация скрипта для передачи ajax_url
    wp_localize_script('wptool-table-script', 'wptool_ajax_obj', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wptool_ajax_nonce')
    ));

    return $output;
}
add_shortcode('wptool_dynamic_table', 'wptool_dynamic_table_shortcode');

В этом коде мы выводим <div> с ID, куда подгрузим таблицу, подключаем JavaScript-файл с нашим AJAX-логикой и передаём в скрипт URL для AJAX-запросов и nonce для безопасности.

Пример данных для таблицы

Для примера возьмём массив с данными, который позже можно заменить на динамическую выборку из базы данных или API.

function wptool_get_table_data() {
    return array(
        array('ID' => 1, 'Name' => 'Иван Иванов', 'Email' => 'ivan@example.com'),
        array('ID' => 2, 'Name' => 'Мария Петрова', 'Email' => 'maria@example.com'),
        array('ID' => 3, 'Name' => 'Пётр Сидоров', 'Email' => 'petr@example.com'),
    );
}

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

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

function wptool_ajax_load_table() {
    check_ajax_referer('wptool_ajax_nonce', 'nonce');

    $data = wptool_get_table_data();

    $output = '<table border="1" cellpadding="5" cellspacing="0" style="border-collapse: collapse; width: 100%;">';
    $output .= '<thead><tr><th>ID</th><th>Имя</th><th>Email</th></tr></thead>';
    $output .= '<tbody>';
    foreach ($data as $row) {
        $output .= '<tr><td>' . esc_html($row['ID']) . '</td><td>' . esc_html($row['Name']) . '</td><td>' . esc_html($row['Email']) . '</td></tr>';
    }
    $output .= '</tbody></table>';

    echo $output;
    wp_die();
}
add_action('wp_ajax_wptool_load_table', 'wptool_ajax_load_table');
add_action('wp_ajax_nopriv_wptool_load_table', 'wptool_ajax_load_table');

Здесь функция проверяет nonce, получает данные и формирует HTML таблицы. Далее выводит результат и завершает скрипт.

JavaScript для загрузки таблицы по AJAX

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

jQuery(document).ready(function($) {
    function wptool_load_table() {
        $('#wptool-dynamic-table').html('Загрузка данных...');
        $.ajax({
            url: wptool_ajax_obj.ajax_url,
            method: 'POST',
            data: {
                action: 'wptool_load_table',
                nonce: wptool_ajax_obj.nonce
            },
            success: function(response) {
                $('#wptool-dynamic-table').html(response);
            },
            error: function() {
                $('#wptool-dynamic-table').html('Ошибка загрузки данных');
            }
        });
    }

    wptool_load_table();
});

Этот скрипт при загрузке страницы отправляет AJAX-запрос на сервер и подставляет полученную таблицу в div.

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

Чтобы сделать таблицу ещё полезнее, добавим фильтрацию по имени и пагинацию.

Форма фильтрации

Добавьте в shortcode вывод формы с полем для поиска:

function wptool_dynamic_table_shortcode() {
    ob_start();
    ?>
    <input type="text" id="wptool-filter" placeholder="Поиск по имени" />
    <div id="wptool-dynamic-table">Загрузка данных...</div>
    <?php
    wp_enqueue_script('wptool-table-script', get_stylesheet_directory_uri() . '/js/wptool-table.js', array('jquery'), '1.1', true);
    wp_localize_script('wptool-table-script', 'wptool_ajax_obj', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('wptool_ajax_nonce')
    ));
    return ob_get_clean();
}
add_shortcode('wptool_dynamic_table', 'wptool_dynamic_table_shortcode');

Обновление JS для передачи фильтра

jQuery(document).ready(function($) {
    function wptool_load_table(filter) {
        $('#wptool-dynamic-table').html('Загрузка данных...');
        $.ajax({
            url: wptool_ajax_obj.ajax_url,
            method: 'POST',
            data: {
                action: 'wptool_load_table',
                nonce: wptool_ajax_obj.nonce,
                filter: filter
            },
            success: function(response) {
                $('#wptool-dynamic-table').html(response);
            },
            error: function() {
                $('#wptool-dynamic-table').html('Ошибка загрузки данных');
            }
        });
    }

    $('#wptool-filter').on('input', function() {
        let filterVal = $(this).val();
        wptool_load_table(filterVal);
    });

    wptool_load_table('');
});

Фильтрация на сервере

function wptool_ajax_load_table() {
    check_ajax_referer('wptool_ajax_nonce', 'nonce');

    $filter = isset($_POST['filter']) ? sanitize_text_field($_POST['filter']) : '';

    $data = wptool_get_table_data();

    if ($filter !== '') {
        $data = array_filter($data, function($item) use ($filter) {
            return mb_stripos($item['Name'], $filter) !== false;
        });
    }

    $output = '<table border="1" cellpadding="5" cellspacing="0" style="border-collapse: collapse; width: 100%;">';
    $output .= '<thead><tr><th>ID</th><th>Имя</th><th>Email</th></tr></thead>';
    $output .= '<tbody>';
    foreach ($data as $row) {
        $output .= '<tr><td>' . esc_html($row['ID']) . '</td><td>' . esc_html($row['Name']) . '</td><td>' . esc_html($row['Email']) . '</td></tr>';
    }
    $output .= '</tbody></table>';

    echo $output;
    wp_die();
}

Применение на практике и советы

Такой подход подходит для вывода списков пользователей, заказов, логов и любых табличных данных, которые меняются во времени. Ключевые моменты при расширении:

Для больших данных используйте пагинацию на сервере, передавая параметры страницы и размера.
Для безопасности всегда проверяйте nonce и права пользователя, если данные чувствительные.
Оптимизируйте выборку из базы, чтобы не перегружать сервер.
Можно интегрировать с плагинами, например, WPRemark для генерации отчётов, или использовать Clearfy Pro для оптимизации AJAX-запросов.

Если вы хотите расширить функционал, например, добавить сортировку по столбцам, рекомендуем посмотреть плагины для таблиц, например, TablePress, однако реализация на собственном коде даёт больше контроля и гибкости.

Для примера можно скачать готовый JS-файл и подключить его, а также протестировать код на локальном сайте.

Заключение

Создание динамической таблицы с помощью shortcode и AJAX — удобный способ улучшить интерфейс WordPress-сайта и добавить интерактивность без сторонних плагинов. Используйте данный шаблон, чтобы адаптировать под свои задачи и данные.