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

Зачем нужна динамическая таблица с фильтрами в WordPress

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

Динамическая таблица с фильтрами позволяет интерактивно сортировать и отбирать записи по нужным параметрам прямо на странице без перезагрузки. Это значительно улучшает UX, ускоряет поиск информации и снижает нагрузку на сервер.

В этой статье мы рассмотрим, как создать такую таблицу вручную с помощью WP REST API, AJAX и jQuery, а также познакомимся с популярными плагинами, которые помогут ускорить разработку.

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

Регистрация кастомного типа записи и произвольных полей

Для примера возьмём кастомный тип записи wpdata_product, который содержит информацию о товарах с метаданными: цена, категория, наличие.

Регистрируем тип записи в файле темы functions.php или в плагине:

function wpdata_register_product_cpt() {
    $labels = [
        'name' => 'Товары',
        'singular_name' => 'Товар',
    ];
    $args = [
        'labels' => $labels,
        'public' => true,
        'has_archive' => true,
        'show_in_rest' => true,
        'supports' => ['title', 'editor'],
    ];
    register_post_type('wpdata_product', $args);
}
add_action('init', 'wpdata_register_product_cpt');

Для добавления метаданных используем стандартные функции, например, с помощью Advanced Custom Fields или вручную через add_post_meta.

Создание REST API эндпоинта для получения данных с фильтрацией

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

function wpdata_register_products_endpoint() {
    register_rest_route('wpdata/v1', '/products', [
        'methods' => 'GET',
        'callback' => 'wpdata_get_products',
        'permission_callback' => '__return_true',
    ]);
}
add_action('rest_api_init', 'wpdata_register_products_endpoint');

function wpdata_get_products(WP_REST_Request $request) {
    $args = [
        'post_type' => 'wpdata_product',
        'posts_per_page' => 20,
        'paged' => $request->get_param('page') ?: 1,
    ];

    // Фильтрация по категории
    if ($category = $request->get_param('category')) {
        $args['tax_query'] = [[
            'taxonomy' => 'category',
            'field' => 'slug',
            'terms' => $category,
        ]];
    }

    // Фильтрация по цене
    $meta_query = [];
    if ($min_price = $request->get_param('min_price')) {
        $meta_query[] = [
            'key' => 'price',
            'value' => $min_price,
            'compare' => '>=',
            'type' => 'NUMERIC',
        ];
    }
    if ($max_price = $request->get_param('max_price')) {
        $meta_query[] = [
            'key' => 'price',
            'value' => $max_price,
            'compare' => '<=',
            'type' => 'NUMERIC',
        ];
    }
    if ($meta_query) {
        $args['meta_query'] = $meta_query;
    }

    $query = new WP_Query($args);
    $products = [];
    foreach ($query->posts as $post) {
        $products[] = [
            'id' => $post->ID,
            'title' => $post->post_title,
            'price' => get_post_meta($post->ID, 'price', true),
            'category' => wp_get_post_terms($post->ID, 'category', ['fields' => 'names']),
        ];
    }

    return [
        'data' => $products,
        'total' => $query->found_posts,
        'pages' => $query->max_num_pages,
    ];
}

Создание фронтенда с AJAX-запросами и фильтрами

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

HTML-разметка фильтров и таблицы:

<div id="wpdata-filters">
    <label>Категория:
        <select id="wpdata-category-filter">
            <option value="">Все</option>
            <option value="electronics">Электроника</option>
            <option value="clothing">Одежда</option>
        </select>
    </label>
    <label>Цена от:
        <input type="number" id="wpdata-min-price" min="0" />
    </label>
    <label>Цена до:
        <input type="number" id="wpdata-max-price" min="0" />
    </label>
    <button id="wpdata-filter-btn">Применить</button>
</div>

<table id="wpdata-products-table" border="1">
    <thead>
        <tr>
            <th>Название</th>
            <th>Цена</th>
            <th>Категория</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

<button id="wpdata-load-more">Показать ещё</button>

JavaScript с jQuery для загрузки данных и применения фильтров:

jQuery(document).ready(function($) {
    let currentPage = 1;
    let loading = false;

    function wpdata_load_products(reset = false) {
        if (loading) return;
        loading = true;
        if (reset) {
            currentPage = 1;
            $('#wpdata-products-table tbody').empty();
        }

        const data = {
            page: currentPage,
            category: $('#wpdata-category-filter').val(),
            min_price: $('#wpdata-min-price').val(),
            max_price: $('#wpdata-max-price').val(),
        };

        $.getJSON('/wp-json/wpdata/v1/products', data, function(response) {
            response.data.forEach(function(item) {
                const row = `<tr><td>${item.title}</td><td>${item.price}</td><td>${item.category.join(', ')}</td></tr>`;
                $('#wpdata-products-table tbody').append(row);
            });
            if (currentPage >= response.pages) {
                $('#wpdata-load-more').hide();
            } else {
                $('#wpdata-load-more').show();
            }
            loading = false;
        });
    }

    $('#wpdata-filter-btn').on('click', function() {
        wpdata_load_products(true);
    });

    $('#wpdata-load-more').on('click', function() {
        currentPage++;
        wpdata_load_products(false);
    });

    // Загрузка при загрузке страницы
    wpdata_load_products(true);
});

Обзор плагинов для реализации динамических таблиц с фильтрами

WPDataTables

Один из самых популярных плагинов для создания интерактивных таблиц с фильтрами, сортировкой и пагинацией. Позволяет работать с данными из базы, Excel, CSV, Google Sheets. Подходит для пользователей без навыков программирования.

Преимущества:

• Визуальный редактор таблиц
• Мощные фильтры по колонкам
• Поддержка больших объемов данных с серверной обработкой

Недостатки — платный премиум функционал.

TablePress с дополнениями

Бесплатный плагин для создания таблиц с возможностью добавлять фильтры через дополнительные расширения (например, TablePress Extension: DataTables Column Filters). Отлично подходит для простых задач, но требует настройки для динамических источников.

WPGPT и Clearfy Pro для оптимизации и расширения

Для ускорения работы с таблицами и управления данными можно использовать WPGPT — плагин с функциями автоматизации и расширенного контроля данных, а также Clearfy Pro для оптимизации производительности и безопасности сайта.

Советы по оптимизации динамических таблиц с фильтрами

При работе с большими объемами данных важно:

• Использовать серверную фильтрацию и пагинацию — не загружать все записи на страницу.
• Добавлять индексы в базу для полей, по которым часто фильтруют.
• Кешировать результаты запросов — например, с помощью Transients API или внешних кэширующих плагинов.
• Минимизировать нагрузку на фронтенд — делать запросы асинхронно и показывать индикаторы загрузки.

Для индексации метаданных в WordPress можно использовать пример из статьи Как создать эффективный индекс по метаданным в WordPress. Это существенно ускорит фильтрацию и сортировку.