Замените URL-адреса кнопками в экспортированной таблице wpDataTables, используя JavaScript

Содержание

Вопрос или проблема
Ответ или решение
Замените URL на кнопки в экспортированной таблице wpDataTables с помощью JavaScript
Проблема
Решение
Учет экспорта
Заключение

Вопрос или проблема

Я работаю с плагином wpDataTables на сайте WordPress и пытаюсь заменить URL на кнопки в одной из моих таблиц. В частности, у меня есть столбцы, содержащие ссылки на Instagram и YouTube, и я хочу, чтобы они отображались как кнопки “Открыть”, которые, при нажатии, открывают ссылку в новой вкладке.

Я добавил следующий код JavaScript в свой файл hello-frontend.min.js, чтобы попробовать заменить ссылки на кнопки:

document.addEventListener('DOMContentLoaded', () => {
  // Пользовательский код для замены ссылок на кнопки
  document.querySelectorAll('td.column-instagram a, td.column-youtube a').forEach(function(link) {
    const url = link.getAttribute('href');
    const button = document.createElement('button');
    button.textContent="Открыть";
    button.className="button-color";
    button.addEventListener('click', function() {
      window.open(url, '_blank');
    });
    link.innerHTML = ''; // Очистить ссылку
    link.appendChild(button); // Добавить кнопку
  });
});

После развертывания этого кода ссылки по-прежнему отображаются как обычные URL в таблице.

Почему URL не заменяются на кнопки, и как я могу убедиться, что ссылки правильно заменены кнопками? Есть ли лучший подход для изменения содержимого строк таблицы, созданных wpDataTables?

Большое спасибо за любую помощь!:)

Я изучил документацию плагина wpDataTables и обнаружил, что есть опция отображать ссылки как кнопки. Однако, когда я включаю эту функцию и экспортирую таблицу, экспортируемый файл показывает текст кнопки (например, “Открыть”) вместо фактического URL. Я хочу, чтобы кнопки отображались в таблице, но сохраняли правильный формат ссылок в экспортах. Чтобы решить эту проблему, я попробовал заменить ссылки на пользовательские кнопки с помощью JavaScript, но это не сработало, как ожидалось.

Ответ или решение

Замените URL на кнопки в экспортированной таблице wpDataTables с помощью JavaScript

При работе с плагином wpDataTables в WordPress возникают ситуации, когда необходимо заменить URL-адреса на кнопки в таблицах. Это часто встречается, когда у вас есть ссылки на платформы, такие как Instagram и YouTube, и вы хотите, чтобы вместо обычных ссылок отображались кнопки с текстом "Открыть". Однако, как показывает ваша ситуация, реализация может быть не так проста, как предполагалось.

Проблема

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

Ошибки в селекторах CSS: Возможно, классы или структуры HTML, предоставляемые wpDataTables, отличаются от ожидаемых.
Загрузка скриптов: Ваш код может выполняться до того, как таблицы wpDataTables будут полностью загружены на страницу.
Конфликты с другими плагинами: Возможно, другие скрипты или стили на странице мешают работе вашего JavaScript.

Решение

Чтобы обеспечить корректную замену URL на кнопки, выполните следующие шаги:

Проверьте структуру таблицы: Убедитесь, что ваши селекторы соответствуют правильно сгенерированным элементам в HTML. Для этого откройте инструменты разработчика (F12), чтобы увидеть структуру таблицы и убедиться, что вы целитесь в правильные элементы.
Используйте события обработки: Убедитесь, что ваш скрипт выполняется после полной загрузки таблицы wpDataTables. Вместо DOMContentLoaded, вы можете использовать событие wpdtReady, доступное в wpDataTables.

document.addEventListener('wpdtReady', () => {
  // Код для замены ссылок на кнопки
  document.querySelectorAll('td.column-instagram a, td.column-youtube a').forEach(function(link) {
    const url = link.getAttribute('href');
    const button = document.createElement('button');
    button.textContent = "Открыть";
    button.className = "button-color";

    // Открываем ссылку в новой вкладке
    button.addEventListener('click', function() {
      window.open(url, '_blank');
    });

    // Очищаем элемент link и добавляем кнопку
    link.innerHTML = '';
    link.appendChild(button);
  });
});

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

Учет экспорта

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

Можно создать дополнительную функцию для сброса кнопок в оригинальные ссылки в момент экспорта.

function restoreLinks() {
  document.querySelectorAll('td.column-instagram a.button-color, td.column-youtube a.button-color').forEach(function(button) {
    const originalUrl = /* сохраненное значение URL */;
    const anchor = document.createElement('a');
    anchor.href = originalUrl;
    anchor.textContent = "Открыть";
    button.replaceWith(anchor);
  });
}

В результате, при загрузке таблицы у вас будут кнопки, а перед экспортом таблицы вызывается функция restoreLinks(), которая заменит кнопки обратно на ссылки.

Заключение

Заменить URL на кнопки в wpDataTables – задача, требующая учета порядка загрузки и структуры HTML. Следуя вышеприведенным рекомендациям и примерам кода, вы сможете достичь желаемого результата. Если у вас возникнут дополнительные вопросы или потребуется помощь, не стесняйтесь обращаться к профессиональным разработчикам или сообществам WordPress.