コミュニティの皆様、こんにちは
Topic Body に 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 は、link で提供されているページ（Chrome を使用）を開き、F12 を押してコードビューアで HTML を選択し、
その後（Windows の場合）、マウスの右クリックで コピー → OuterHTML をコピー を選択して、この投稿に貼り付けたものです。
元の機能のすべてが備わっているわけではありませんが、少なくともこの HTML を元の HTML と比較して、Discourse が何をフィルタリングし、何が可能で何が不可能かを学ぶことができます。
また、信頼性の高い方がこれを Wiki に変換して、他の人が生 HTML を閲覧できるようにしていただけると幸いです。
参考になれば幸いです
編集
コピー＆ペーストについて補足します。ページ全体を切り取り、try.discourse.org の 投稿 に貼り付け、ソートボタンがそのまま残るかどうかを確認しました。残念ながら、それはできませんでした。
「いいね！」 1
その結果は、Discourse がサポートする Markdown テーブルに過ぎません。
「いいね！」 2
素晴らしいです。ただし、ソートや検索などのデータテーブル機能は備わっていますか？
いいえ。
それを実現する方法として最も有力なのはJavaScriptを使うことだと思いますが、Discourseでどの程度フィルタリングされてしまうかはわかりません。私も以前同様の問題に直面した際、最終的には情報を別の場所に配置してリンクを提供する方が簡単だと結論づけました。Discourseを本来の用途とは異なるものに無理やり変えたり、Discourseが提供するセキュリティを回避しようとしたりしないでください。それはそれなりの理由があるからです。
「いいね！」 3
その通りですね。私の最善の選択肢は、HTML ページにデータテーブルを追加し、それを iframe を使って Discourse のトピックに埋め込むことです。
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]
ただし、各テーブルに対してカスタマイズしたい項目が複数あり、どのように進めればよいか確信が持てません。
例えば：
-
各テーブルで異なる Gist ID を使用したいです。これは、wrap に属性を渡して
elem.children[0].dataset.gistでアクセスすることで比較的簡単に実現できるはずです：[wrap=dataTables gist="some_gist_id"] <table></table> [/wrap] -
しかし、
dataSrc関数内で異なる処理コード、または異なるcolumnやdomパラメータを持つ複数のテーブルを作成したい場合はどうすればよいでしょうか？dataTables.dataTable()に JS 設定ファイルを渡す方法はありますか？
「いいね！」 3
テーブルごとに異なるバリエーションをいくつ使う予定でしょうか、それとも各テーブルに合わせたカスタムバリエーションが必要になりますか？
「いいね！」 1
テーブルごとにカスタム設定を適用します。
現在のアプローチは、異なる設定を含むヘルパー JS ファイルを作成し、[wrap] ブロック内の属性を通じてそれらを選択する方法です。その後、以下のようにします。
dataTables.dataTable(Object.assign(commonConfig, specificConfig(myAttributes)))
しかし、より柔軟な解決策があるかどうか興味があります。
「いいね！」 1