Привет, сообщество,
Пытался ли кто-нибудь внедрить Data tables в тело темы? Есть ли какие-то плагины или темы?
Спасибо,
2 лайка
Я пытался создать таблицы со ссылками на изображения внутри ячеек, но у меня не получилось. См.: Как создать красивую таблицу в посте?
Следовательно, я полагаю, что базовый Discourse не поддерживает такую возможность.
Если это возможно, я хотел бы узнать, как это сделать.
Поскольку сайт, на котором я нахожусь, не может добавлять дополнительные плагины согласно плану/соглашению, я не смог рассмотреть этот вариант.
1 лайк
Да, я не знаю, как это реализовать.
Не полный набор, но, возможно, достаточно для начала.
Показать записей
Поиск:
| Имя | Должность | Офис | Возраст | Дата начала | Зарплата |
|---|---|---|---|---|---|
| Airi Satou | Бухгалтер | Токио | 33 | 2008/11/28 | $162,700 |
| Angelica Ramos | Главный исполнительный директор (CEO) | Лондон | 47 | 2009/10/09 | $1,200,000 |
| Ashton Cox | Младший технический редактор | Сан-Франциско | 66 | 2009/01/12 | $86,000 |
| Bradley Greer | Инженер-программист | Лондон | 41 | 2012/10/13 | $132,000 |
| Brenden Wagner | Инженер-программист | Сан-Франциско | 28 | 2011/06/07 | $206,850 |
| Brielle Williamson | Специалист по интеграции | Нью-Йорк | 61 | 2012/12/02 | $372,000 |
| Bruno Nash | Инженер-программист | Лондон | 38 | 2011/05/03 | $163,500 |
| Caesar Vance | Поддержка допродаж | Нью-Йорк | 21 | 2011/12/12 | $106,450 |
| Cara Stevens | Помощник по продажам | Нью-Йорк | 46 | 2011/12/06 | $145,600 |
| Cedric Kelly | Старший разработчик JavaScript | Эдинбург | 22 | 2012/03/29 | $433,060 |
| Имя | Должность | Офис | Возраст | Дата начала | Зарплата |
Показано с 1 по 10 из 57 записей
Приведённый выше HTML был получен путём открытия ссылки (используя Chrome), нажатия F12,
выбора HTML в просмотрщике кода
затем (в Windows) правая кнопка мыши → Копировать → Копировать OuterHTML
и вставка этого кода в данный пост.
Я знаю, что здесь нет всех функций оригинала, но хотя бы вы можете сравнить этот HTML с оригиналом и увидеть, что Discourse фильтрует, чтобы понять, что можно и что нельзя делать.
Также, если кто-то с большим доверием сможет преобразовать это в Вики, чтобы другие могли просматривать исходный HTML, это было бы очень кстати.
Надеюсь, это поможет.
ИЗМЕНЕНИЕ
Расширяя тему копирования и вставки: я вырезал всю страницу и вставил её в пост на try.discourse.org, чтобы проверить, сохранятся ли кнопки сортировки. К сожалению, не получилось.
1 лайк
Этот результат — просто таблица в формате Markdown, которая поддерживается в Discourse:
2 лайка
Отлично. Но есть ли у него функциональность таблицы данных, такая как сортировка и поиск?
Нет.
Мое лучшее предположение о том, как это сделать, — использовать JavaScript, но я не знаю, насколько сильно это будет отфильтровано в Discourse. Когда я столкнулся с аналогичными проблемами, я в итоге пришел к выводу, что проще разместить страницу с информацией в другом месте и предоставить ссылку. Не пытайтесь заставить Discourse делать то, для чего он не предназначен, и не пытайтесь обойти предоставляемую им защиту — она существует не просто так.
3 лайка
Это верно. Мой лучший вариант — добавить таблицу данных в HTML-страницу и встроить её в тему Discourse с помощью iframe.
Datatables — это плагин для jQuery. Плагины jQuery можно довольно легко реализовать в Discourse. Существует несколько примеров этого, например, компоненты темы Tiles и Slick для галерей.
По сути, вам нужно создать декоратор для сообщений, содержащих таблицы, которые вы хотите обработать с помощью DataTables.
Я создал пример того, как это можно сделать, здесь:
А также подготовил предварительный просмотр для него в конструкторе тем:
https://theme-creator.discourse.org/theme/Johani/discourse_datetables
Сейчас это, конечно, немного базово, и отсутствуют некоторые стили, но это должно стать хорошей отправной точкой, поскольку сортировка, поиск и пагинация работают отлично.
12 лайков
Это невероятно 
Большое спасибо
3 лайка
У меня есть несколько таблиц, которые я хочу включить в свой форум, и ваш подход работает идеально. Я создал этот файл инициализатора компонента темы:
import { apiInitializer } from 'discourse/lib/api';
import loadScript from 'discourse/lib/load-script';
export default apiInitializer('0.11.1', (api) => {
api.decorateCookedElement(
(elem, helper) => {
const dataTables = $('[data-wrap="dataTables"] table', elem);
if (!dataTables.length) return;
loadScript('https://cdn.datatables.net/1.10.25/js/jquery.dataTables.min.js').then(
() => {
$.fn.dataTable.ext.errMode = 'throw';
dataTables.dataTable({
ajax: {
url:
'https://gist.githubusercontent.com/USERNAME/MY_GIST_ID/raw/data.json',
dataSrc(data) {
return data.map((x) => {
return {
id: x.my_id,
title: `${x.number} - ${x.title}`,
};
});
},
},
columns: [
{ data: 'id', title: 'My ID' },
{ data: 'title', title: 'My Title' }
],
dom: 'Bfrt',
});
}
);
},
{ id: 'discourse-my-custom-data-tables', onlyStream: true }
);
});
И я загружаю таблицу в посте с помощью этого:
[wrap=dataTables]
<table></table>
[/wrap]
Однако есть несколько вещей, которые я хотел бы настроить для каждой таблицы, и я не уверен, как это сделать.
Например:
-
Я хочу использовать другой ID Gist для каждой таблицы. Это должно быть достаточно просто, передав атрибут в wrap и получив его с помощью
elem.children[0].dataset.gist:[wrap=dataTables gist="some_gist_id"] <table></table> [/wrap] -
Но что, если я хочу несколько таблиц, каждая с разным кодом обработки в функции
dataSrcили разными параметрамиcolumnилиdom?Есть ли способ передать JS-файл конфигурации в
dataTables.dataTable()?
3 лайка
Существует ли фиксированное количество вариантов, которые вы, скорее всего, будете использовать для разных таблиц, или вам понадобятся индивидуальные варианты для каждой таблицы?
1 лайк
Свои для каждой таблицы.
Мой текущий подход — создавать вспомогательные JS-файлы с разными конфигурациями и выбирать между ними через атрибут в блоке [wrap]. Затем я делаю:
dataTables.dataTable(Object.assign(commonConfig, specificConfig(myAttributes)))
Но мне было бы интересно узнать, существует ли более гибкое решение.
1 лайк