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

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

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

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

В WordPress есть несколько способов работы с AJAX, но для динамических таблиц особенно удобен REST API, так как он более универсален и совместим с современными подходами.

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

Шаг 1. Создаем кастомный REST API эндпоинт

Для начала нам нужно создать REST API маршрут, который будет отдавать данные для таблицы в JSON-формате. Добавим следующий код в файл functions.php вашей темы или в отдельный плагин:

add_action('rest_api_init', function () {
    register_rest_route('wpelement/v1', '/table-data/', array(
        'methods' => 'GET',
        'callback' => 'wpelement_get_table_data',
        'permission_callback' => '__return_true',
    ));
});

function wpelement_get_table_data(WP_REST_Request $request) {
    $paged = max(1, intval($request->get_param('page')));
    $per_page = 10;

    $args = array(
        'post_type' => 'post',
        'posts_per_page' => $per_page,
        'paged' => $paged,
        'orderby' => 'date',
        'order' => 'DESC',
    );

    $query = new WP_Query($args);
    $posts = [];

    foreach ($query->posts as $post) {
        $posts[] = [
            'id' => $post->ID,
            'title' => get_the_title($post),
            'date' => get_the_date('', $post),
            'author' => get_the_author_meta('display_name', $post->post_author),
        ];
    }

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

Этот код создает endpoint /wp-json/wpelement/v1/table-data/, который возвращает список постов с пагинацией.

Шаг 2. Верстка таблицы и кнопки пагинации

Добавим HTML-разметку для таблицы и элементов управления, например, в нужный шаблон темы или в шорткод:

<div id="wpelement-table-container">
  <table id="wpelement-table" border="1" cellpadding="5" cellspacing="0">
    <thead>
      <tr>
        <th>ID</th>
        <th>Название</th>
        <th>Дата публикации</th>
        <th>Автор</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
  <div id="wpelement-pagination"></div>
</div>

Шаг 3. JavaScript для загрузки и обновления таблицы

Теперь напишем JavaScript, который будет запрашивать данные с сервера и обновлять таблицу. Добавьте этот скрипт в футер сайта или подключите как отдельный файл, не забыв локализовать скрипт для получения URL REST API (пример ниже — для самостоятельного добавления):

document.addEventListener('DOMContentLoaded', function () {
  const tableBody = document.querySelector('#wpelement-table tbody');
  const pagination = document.getElementById('wpelement-pagination');
  let currentPage = 1;

  function wpelement_loadTable(page = 1) {
    fetch(`/wp-json/wpelement/v1/table-data/?page=${page}`)
      .then(response => response.json())
      .then(data => {
        tableBody.innerHTML = '';
        data.data.forEach(item => {
          const row = document.createElement('tr');
          row.innerHTML = `
            <td>${item.id}</td>
            <td>${item.title}</td>
            <td>${item.date}</td>
            <td>${item.author}</td>
          `;
          tableBody.appendChild(row);
        });

        // Создаем пагинацию
        pagination.innerHTML = '';
        for (let i = 1; i <= data.pages; i++) {
          const btn = document.createElement('button');
          btn.textContent = i;
          btn.disabled = (i === page);
          btn.addEventListener('click', () => {
            currentPage = i;
            wpelement_loadTable(i);
          });
          pagination.appendChild(btn);
        }
      })
      .catch(error => console.error('Ошибка загрузки данных:', error));
  }

  wpelement_loadTable(currentPage);
});

Шаг 4. Оптимизация и расширение функционала

Добавление фильтрации по дате или автору

Для расширения функционала можно добавить фильтры в REST API и на фронтенде. Например, передать параметры author или date_query в запрос, а в JS — добавить поля ввода для поиска.

Кеширование результатов

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

Использование готовых плагинов

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

Выводы и рекомендации

Создание динамической таблицы с помощью REST API и AJAX в WordPress — отличный способ улучшить UX и сделать сайт более интерактивным. Такой подход легко масштабируется и настраивается под любые типы данных.

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

Если хотите быстро и без кода получить таблицы с фильтрами и пагинацией, посмотрите в сторону готовых решений, например, ABC Pagination.