Как создать динамическую таблицу с AJAX-фильтром в WordPress для удобного отображения данных

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

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

Стандартная фильтрация данных в WordPress часто подразумевает перезагрузку страницы, что плохо сказывается на скорости и удобстве. AJAX (Asynchronous JavaScript and XML) позволяет отправлять запросы к серверу в фоне и обновлять часть страницы без полной перезагрузки.

Преимущества AJAX-фильтра:

• Быстрая обратная связь — данные обновляются мгновенно;
• Сокращение нагрузки на сервер и клиент, так как обновляется только часть страницы;
• Возможность создания сложных фильтров с множественными параметрами;
• Улучшение пользовательского опыта и повышение конверсии.

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

Шаг 1. Создание кастомного запроса для выборки данных

Начнём с создания PHP-функции, которая будет обрабатывать AJAX-запрос и возвращать отфильтрованные данные. Функция должна принимать параметры фильтрации, формировать запрос к базе данных и возвращать HTML с таблицей.

Пример функции для обработки AJAX-запроса в файле functions.php вашей темы или в отдельном плагине:

add_action('wp_ajax_wpdata_get_filtered_data', 'wpdata_get_filtered_data');
add_action('wp_ajax_nopriv_wpdata_get_filtered_data', 'wpdata_get_filtered_data');

function wpdata_get_filtered_data() {
    global $wpdb;
    $category = isset($_POST['category']) ? sanitize_text_field($_POST['category']) : '';
    $search = isset($_POST['search']) ? sanitize_text_field($_POST['search']) : '';

    // Пример запроса с фильтрами
    $query = "SELECT id, post_title, post_date FROM {$wpdb->prefix}posts WHERE post_type = 'post' AND post_status = 'publish'";

    if ($category) {
        $query .= $wpdb->prepare(" AND ID IN (SELECT object_id FROM {$wpdb->prefix}term_relationships WHERE term_taxonomy_id = %d)", intval($category));
    }

    if ($search) {
        $query .= $wpdb->prepare(" AND post_title LIKE %s", '%' . $wpdb->esc_like($search) . '%');
    }

    $query .= " ORDER BY post_date DESC LIMIT 50";

    $results = $wpdb->get_results($query);

    if ($results) {
        echo '<table class="wpdata-table"><thead><tr><th>ID</th><th>Заголовок</th><th>Дата</th></tr></thead><tbody>';
        foreach ($results as $row) {
            echo '<tr>';
            echo '<td>' . esc_html($row->id) . '</td>';
            echo '<td>' . esc_html($row->post_title) . '</td>';
            echo '<td>' . esc_html(date('d.m.Y', strtotime($row->post_date))) . '</td>';
            echo '</tr>';
        }
        echo '</tbody></table>';
    } else {
        echo '<p>Данные не найдены.</p>';
    }

    wp_die();
}

В этой функции мы используем два фильтра: категорию и поисковый запрос по заголовку. Запрос ограничен 50 записями для оптимизации.

Шаг 2. Добавление AJAX скрипта на фронтенд

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

Добавьте в functions.php регистрацию и подключение скрипта:

function wpdata_enqueue_scripts() {
    wp_enqueue_script('wpdata-ajax-filter', get_template_directory_uri() . '/js/wpdata-ajax-filter.js', ['jquery'], null, true);
    wp_localize_script('wpdata-ajax-filter', 'wpdata_ajax', [
        'ajax_url' => admin_url('admin-ajax.php')
    ]);
}
add_action('wp_enqueue_scripts', 'wpdata_enqueue_scripts');

В файле js/wpdata-ajax-filter.js пишем следующий код:

jQuery(document).ready(function($) {
    function wpdataLoadData() {
        var category = $('#wpdata-category-filter').val();
        var search = $('#wpdata-search-filter').val();

        $.ajax({
            url: wpdata_ajax.ajax_url,
            method: 'POST',
            data: {
                action: 'wpdata_get_filtered_data',
                category: category,
                search: search
            },
            beforeSend: function() {
                $('#wpdata-table-container').html('<p>Загрузка данных...</p>');
            },
            success: function(response) {
                $('#wpdata-table-container').html(response);
            },
            error: function() {
                $('#wpdata-table-container').html('<p>Ошибка загрузки данных.</p>');
            }
        });
    }

    $('#wpdata-category-filter, #wpdata-search-filter').on('change keyup', function() {
        wpdataLoadData();
    });

    // Инициализируем загрузку данных при загрузке страницы
    wpdataLoadData();
});

Шаг 3. Добавление HTML-разметки фильтров и контейнера таблицы

В нужном месте шаблона или страницы разместите HTML с элементами управления фильтрами и контейнером для таблицы:

<select id="wpdata-category-filter">
    <option value="">Все категории</option>
    <option value="1">Категория 1</option>
    <option value="2">Категория 2</option>
</select>

<input type="text" id="wpdata-search-filter" placeholder="Поиск по заголовку">

<div id="wpdata-table-container"></div>

Категории лучше получать динамически из базы, например, через get_categories(), но для примера достаточно статического списка.

Шаг 4. Оптимизация и масштабирование

Если вы работаете с большими объемами данных, рекомендуем использовать WPData — плагин, который позволяет создавать и оптимизировать таблицы с AJAX-фильтрами, пагинацией, сортировкой и экспортом данных. Он интегрируется с WPRemark для управления комментариями и обеспечивает высокую скорость работы даже при тысячах записей.

Также рекомендуем:

• Добавлять индексы к полям, участвующим в фильтрации, для ускорения запросов;
• Кешировать результаты частых запросов с помощью transients или Object Cache;
• Использовать WP_Query или WPData API для более гибкой работы с данными;
• Обрабатывать ошибки и пустые результаты для корректного UX.

Пример создания индекса по метаданным для ускорения фильтрации

Для таблицы wp_postmeta можно создать индекс по ключу и значению метаданных:

CREATE INDEX wpdata_postmeta_key_value_idx ON wp_postmeta (meta_key(191), meta_value(191));

Это значительно ускорит запросы с фильтрами по метаданным.

Использование WPData для упрощения

WPData позволяет создавать таблицы с фильтрами и AJAX без написания кода. Подробнее на официальной странице плагина WPData.

Вывод

Создание динамической таблицы с AJAX-фильтрацией в WordPress — мощный инструмент для улучшения интерфейса и производительности сайта. Приведённый пример поможет быстро реализовать базовый функционал, который можно адаптировать и расширять под конкретные задачи.