Hallo Community,
Hat jemand bereits versucht, Data tables in den Themeninhalt einzubetten? Gibt es dafür ein Plugin oder ein Theme?
Vielen Dank,
2 „Gefällt mir“
Ich habe versucht, Tabellen mit einigen Links zu Bildern innerhalb einer Zelle zu erstellen, aber es hat nicht funktioniert. Siehe: Wie erstellt man eine schöne Tabelle in einem Beitrag?
Daraus schließe ich, dass die Standard-Version von Discourse dies nicht zulässt.
Falls es möglich ist, würde ich gerne wissen, wie.
Da auf der Website, auf der ich mich befinde, aufgrund des Plans/der Vereinbarung keine weiteren Plugins hinzugefügt werden können, konnte ich diesen Weg nicht weiter verfolgen.
1 „Gefällt mir“
Ja, ich weiß nicht, wie man das umsetzt.
Nicht das volle Programm, aber vielleicht gut genug, um Ihnen den Einstieg zu erleichtern.
Zeige Einträge
Suchen:
| Name | Position | Büro | Alter | Startdatum | Gehalt |
|---|---|---|---|---|---|
| Airi Satou | Buchhalter | Tokio | 33 | 2008/11/28 | $162,700 |
| Angelica Ramos | Chief Executive Officer (CEO) | London | 47 | 2009/10/09 | $1,200,000 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 |
| Bradley Greer | Software Engineer | London | 41 | 2012/10/13 | $132,000 |
| Brenden Wagner | Software Engineer | San Francisco | 28 | 2011/06/07 | $206,850 |
| Brielle Williamson | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 |
| Bruno Nash | Software Engineer | London | 38 | 2011/05/03 | $163,500 |
| Caesar Vance | Pre-Sales Support | New York | 21 | 2011/12/12 | $106,450 |
| Cara Stevens | Sales Assistant | New York | 46 | 2011/12/06 | $145,600 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 |
| Name | Position | Büro | Alter | Startdatum | Gehalt |
Zeige 1 bis 10 von 57 Einträgen
Das obige HTML wurde erstellt, indem die link bereitgestellte Seite (unter Verwendung von Chrome) geöffnet, F12 gedrückt, im Code-Viewer HTML ausgewählt und dann (unter Windows) mit der rechten Maustaste Kopieren → OuterHTML kopieren gewählt wurde.
Dieser Code wurde dann in diesen Beitrag eingefügt.
Ich weiß, dass er nicht alle Schnickschnack-Features des Originals hat, aber zumindest können Sie dieses HTML mit dem Original vergleichen und sehen, was Discourse filtert, um zu lernen, was möglich ist und was nicht.
Falls jemand mit mehr Vertrauen dies in ein Wiki umwandeln kann, damit andere das rohe HTML einsehen können, wäre das sehr willkommen.
Hoffe, das hilft.
EDIT
Um das Kopieren und Einfügen zu erweitern: Ich habe die gesamte Seite herausgeschnitten und in einen post auf try.discourse.org eingefügt, um zu prüfen, ob die Sortier-Buttons übertragen werden. Leider ohne Erfolg.
1 „Gefällt mir“
Dieses Ergebnis ist lediglich eine Markdown-Tabelle, die von Discourse unterstützt wird:
2 „Gefällt mir“
Großartig. Hat es aber auch Funktionalitäten für Datentabellen wie Sortieren und Suchen?
Nein.
Meine beste Vermutung, wie man das umsetzen könnte, wäre die Verwendung von JavaScript, aber ich weiß nicht, wie viel davon von Discourse herausgefiltert wird. Als ich auf dasselbe Problem gestoßen bin, bin ich schließlich zu dem Schluss gekommen, dass es einfacher wäre, die Seite mit den Informationen woanders zu platzieren und einen Link bereitzustellen. Versuchen Sie nicht, Discourse zu etwas zu zwingen, was es nicht ist, und versuchen Sie nicht, die Sicherheit von Discourse zu umgehen – sie ist aus gutem Grund vorhanden.
3 „Gefällt mir“
Das stimmt. Meine beste Option ist es, die Datentabelle in einer HTML-Seite einzubinden und sie mit einem iframe in ein Discourse-Thema einzubetten.
Datatables ist ein jQuery-Plugin. jQuery-Plugins können in Discourse recht einfach implementiert werden. Es gibt bereits einige Beispiele dafür, wie die Theme-Komponenten Tiles und Slick Galerie.
Im Wesentlichen musst du einen Dekorator für Beiträge erstellen, die Tabellen enthalten, die du mit dataTables ansprechen möchtest.
Ich habe hier ein Beispiel erstellt, wie du das umsetzen kannst:
Und eine Vorschau dafür im Theme-Editor:
https://theme-creator.discourse.org/theme/Johani/discourse_datetables
Es ist derzeit noch etwas grundlegend und es fehlen einige Styles, aber es sollte ein guter Ausgangspunkt sein, da Sortieren, Suchen und Paginierung einwandfrei funktionieren.
12 „Gefällt mir“
Das ist unglaublich 
Vielen Dank
3 „Gefällt mir“
Ich habe mehrere Tabellen, die ich in mein Forum aufnehmen möchte, und Ihr Ansatz funktioniert perfekt. Ich habe diese Initialisierungsdatei für das Theme-Komponente erstellt:
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 }
);
});
Und ich lade die Tabelle im Beitrag so:
[wrap=dataTables]
<table></table>
[/wrap]
Allerdings möchte ich für jede Tabelle mehrere Dinge anpassen und bin mir nicht sicher, wie ich vorgehen soll.
Zum Beispiel:
-
Ich möchte für jede Tabelle eine andere Gist-ID verwenden. Das sollte einfach sein, indem man ein Attribut an das Wrap übergibt und es dann mit
elem.children[0].dataset.gistabruft:[wrap=dataTables gist="some_gist_id"] <table></table> [/wrap] -
Aber was ist, wenn ich mehrere Tabellen möchte, jede mit unterschiedlichem Verarbeitungscode in der
dataSrc-Funktion oder unterschiedlichencolumn- oderdom-Parametern?Gibt es eine Möglichkeit, eine JS-Konfigurationsdatei an
dataTables.dataTable()zu übergeben?
3 „Gefällt mir“
Gibt es eine festgelegte Anzahl von Varianten, die Sie wahrscheinlich für verschiedene Tabellen verwenden würden, oder müssen Sie für jede Tabelle individuelle Varianten erstellen?
1 „Gefällt mir“
Individuelle für jede Tabelle.
Mein aktueller Ansatz besteht darin, Hilfs-JS-Dateien mit unterschiedlichen Konfigurationen zu erstellen und über ein Attribut im [wrap]-Block zwischen ihnen zu wählen. Anschließend führe ich Folgendes aus:
dataTables.dataTable(Object.assign(commonConfig, specificConfig(myAttributes)))
Ich wäre jedoch neugierig zu wissen, ob es eine flexiblere Lösung gibt.
1 „Gefällt mir“