Как сделать отображение пагинации в WordPress для таблиц

В WordPress часто требуется выводить большие объемы данных в виде таблиц, будь то списки товаров, заказов или пользовательских записей. Когда данных много, неудобно показывать их все сразу – здесь на помощь приходит пагинация. Обычно WordPress автоматически добавляет пагинацию к страницам с постами, но для таблиц в пользовательском выводе нужно реализовать её самостоятельно.

Почему нужна пагинация для таблиц в WordPress

Большие таблицы с сотнями строк замедляют загрузку страниц и ухудшают удобство пользователей. Пагинация позволяет:

• Уменьшить нагрузку на сервер и ускорить загрузку страниц.
• Упростить восприятие данных, разбив таблицу на страницы.
• Сделать интерфейс более удобным и современным.

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

Плагины для пагинации таблиц в WordPress

Для удобства и быстрого запуска можно использовать готовые решения. Вот несколько популярных плагинов:

• TablePress – универсальный плагин для создания и управления таблицами, с поддержкой пагинации, сортировки и фильтрации. Идеален для непрофессионалов.
• WP DataTables – более продвинутый плагин с визуальным редактором, поддержкой AJAX-подгрузки данных и сложных фильтров.
• Posts Table Pro – позволяет создавать таблицы из постов WordPress с пагинацией, поиском и сортировкой.

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

Реализация пагинации для таблиц с помощью WP_Query и кастомного кода

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

Создаем WP_Query с параметрами пагинации

Для начала в функции темы или плагина сформируем запрос с учётом текущей страницы:

function wppagenavi_get_custom_table_data() {
    $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
    $args = array(
        'post_type' => 'product',
        'posts_per_page' => 10,
        'paged' => $paged
    );
    return new WP_Query($args);
}

Здесь мы выводим кастомный тип записей product по 10 штук на страницу.

Вывод таблицы с данными

Теперь строим таблицу, используя полученный запрос:

function wppagenavi_render_table() {
    $query = wppagenavi_get_custom_table_data();
    if ( $query->have_posts() ) {
        echo '<table class="wppagenavi-table">';
        echo '<thead><tr><th>Название</th><th>Дата</th></tr></thead>';
        echo '<tbody>';
        while ( $query->have_posts() ) {
            $query->the_post();
            echo '<tr>';
            echo '<td>' . get_the_title() . '</td>';
            echo '<td>' . get_the_date() . '</td>';
            echo '</tr>';
        }
        echo '</tbody></table>';
        wp_reset_postdata();
        wppagenavi_render_pagination($query);
    } else {
        echo '<p>Данные не найдены.</p>';
    }
}

Функция вывода пагинации

Пагинацию можно вывести с помощью встроенной функции paginate_links:

function wppagenavi_render_pagination($query) {
    $big = 999999999; // уникальное число для замены
    $pages = paginate_links( array(
        'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link($big) ) ),
        'format' => '?paged=%#%',
        'current' => max( 1, get_query_var('paged') ),
        'total' => $query->max_num_pages,
        'prev_text' => '« Назад',
        'next_text' => 'Вперед »',
        'type' => 'list'
    ) );
    if ( $pages ) {
        echo '<nav class="wppagenavi-pagination">' . $pages . '</nav>';
    }
}

Особенности AJAX пагинации для таблиц в WordPress

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

Основные шаги для реализации AJAX пагинации

• Добавить обработчик AJAX-запроса в PHP.
• Сформировать в JS запрос к серверу с номером страницы.
• Обновить содержимое таблицы без перезагрузки.

Ниже пример упрощённого варианта.

PHP: AJAX обработчик

add_action('wp_ajax_wppagenavi_ajax_pagination', 'wppagenavi_ajax_pagination_callback');
add_action('wp_ajax_nopriv_wppagenavi_ajax_pagination', 'wppagenavi_ajax_pagination_callback');

function wppagenavi_ajax_pagination_callback() {
    $paged = isset($_POST['page']) ? intval($_POST['page']) : 1;
    $args = array(
        'post_type' => 'product',
        'posts_per_page' => 10,
        'paged' => $paged
    );
    $query = new WP_Query($args);
    ob_start();
    if ($query->have_posts()) {
        echo '<tbody>';
        while ($query->have_posts()) {
            $query->the_post();
            echo '<tr><td>' . get_the_title() . '</td><td>' . get_the_date() . '</td></tr>';
        }
        echo '</tbody>';
    }
    wp_reset_postdata();
    $content = ob_get_clean();
    wp_send_json_success(array('html' => $content, 'max_num_pages' => $query->max_num_pages));
}

JavaScript: отправка AJAX запроса и обновление таблицы

jQuery(document).ready(function($) {
    $(document).on('click', '.wppagenavi-pagination a', function(e) {
        e.preventDefault();
        var page = $(this).attr('href').split('paged=')[1];
        $.ajax({
            url: wppagenavi_ajax_object.ajax_url,
            method: 'POST',
            data: {
                action: 'wppagenavi_ajax_pagination',
                page: page
            },
            success: function(response) {
                if(response.success) {
                    $('.wppagenavi-table tbody').replaceWith(response.data.html);
                    // Обновить пагинацию если нужно
                }
            }
        });
    });
});

Для работы JS необходимо локализовать скрипт и передать в него ajax_url через wp_localize_script.

Советы по оптимизации пагинации таблиц

При работе с большими таблицами важно учитывать производительность:

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

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