Ciao Community,
Qualcuno ha provato a incorporare Data tables nel corpo del Topic? Qualche plugin o tema?
Grazie,
2 Mi Piace
Ho provato a creare tabelle con alcuni link a immagini all’interno di una cella, ma senza successo. Vedi: Come creare una bella tabella in un post?
Di conseguenza, non credo che Discourse nella sua versione base lo permetta.
Se fosse possibile, vorrei sapere come.
Dato che il sito su cui mi trovo non può aggiungere altri plugin in base al piano/accordo, non ho potuto esplorare quella strada.
1 Mi Piace
Sì, non so come implementarlo.
Non è la barca completa, ma forse è abbastanza per iniziare.
Mostra voci
Cerca:
| Nome | Posizione | Ufficio | Età | Data di inizio | Stipendio |
|---|---|---|---|---|---|
| Airi Satou | Contabile | Tokyo | 33 | 2008/11/28 | $162,700 |
| Angelica Ramos | Direttore Generale (CEO) | Londra | 47 | 2009/10/09 | $1.200.000 |
| Ashton Cox | Autore Tecnico Junior | San Francisco | 66 | 2009/01/12 | $86.000 |
| Bradley Greer | Ingegnere Software | Londra | 41 | 2012/10/13 | $132.000 |
| Brenden Wagner | Ingegnere Software | San Francisco | 28 | 2011/06/07 | $206.850 |
| Brielle Williamson | Specialista di Integrazione | New York | 61 | 2012/12/02 | $372.000 |
| Bruno Nash | Ingegnere Software | Londra | 38 | 2011/05/03 | $163.500 |
| Caesar Vance | Supporto Pre-Vendita | New York | 21 | 2011/12/12 | $106.450 |
| Cara Stevens | Assistente Vendite | New York | 46 | 2011/12/06 | $145.600 |
| Cedric Kelly | Sviluppatore Javascript Senior | Edimburgo | 22 | 2012/03/29 | $433.060 |
| Nome | Posizione | Ufficio | Età | Data di inizio | Stipendio |
Visualizzazione da 1 a 10 di 57 voci
L’HTML sopra è stato creato aprendo link fornito (usando Chrome), premendo F12,
selezionando HTML nel visualizzatore di codice
poi (su Windows) clic destro e selezionare Copia → Copia HTML Esterno
e incollato in questo post.
So che non ha tutte le funzionalità dell’originale, ma almeno puoi confrontare questo HTML con l’originale e vedere cosa Discourse filtra per imparare cosa puoi e non puoi fare.
Inoltre, se qualcuno con più fiducia può convertire questo in una Wiki in modo che altri possano visualizzare l’HTML grezzo, sarebbe apprezzato.
Spero sia utile
MODIFICA
Espandendo sul copia e incolla, ho tagliato l’intera pagina e incollato in un post su try.discourse.org per vedere se i pulsanti per l’ordinamento sarebbero passati. Niente da fare.
1 Mi Piace
Quel risultato è semplicemente una tabella Markdown, supportata da Discourse:
2 Mi Piace
Ottimo. Ma ha funzionalità di tabella dati come ordinamento e ricerca?
No.
La mia migliore ipotesi su come farlo sarebbe usare JavaScript, ma non so quanto di questo verrà filtrato da Discourse. Quando mi sono imbattuto nello stesso tipo di problemi, ho infine concluso che sarebbe stato più semplice mettere la pagina con le informazioni da qualche altra parte e fornire un link. Non cercare di forzare Discourse a fare cose per cui non è progettato e non tentare di aggirare la sicurezza che Discourse offre: è lì per un buon motivo.
3 Mi Piace
È vero, la mia migliore opzione è aggiungere la tabella dei dati in una pagina HTML e incorporarla in un argomento Discourse tramite iframe.
Datatables è un plugin jQuery. I plugin jQuery possono essere implementati molto facilmente in Discourse. Ci sono alcuni esempi a riguardo, come i componenti del tema Tiles e Slick per gallerie di immagini.
In sostanza, ciò che devi fare è creare un decoratore per i post che contengono tabelle che desideri gestire con dataTables.
Ho creato un esempio su come farlo qui:
e ho generato un’anteprima su Theme Creator qui:
https://theme-creator.discourse.org/theme/Johani/discourse_datetables
Al momento è ovviamente un po’ basilare e mancano alcuni stili, ma dovrebbe essere un buon punto di partenza, poiché ordinamento, ricerca e paginazione funzionano perfettamente.
12 Mi Piace
Questo è incredibile 
Grazie mille
3 Mi Piace
Ho diverse tabelle che vorrei includere nel mio forum e il tuo approccio funziona perfettamente. Ho creato questo file di inizializzazione del componente del tema:
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 }
);
});
E carico la tabella nel post usando questo:
[wrap=dataTables]
<table></table>
[/wrap]
Tuttavia, ci sono diverse cose che vorrei personalizzare per ogni tabella e non sono sicuro di come procedere.
Ad esempio:
-
Vorrei utilizzare un ID Gist diverso per ogni tabella. Dovrebbe essere abbastanza semplice passando un attributo al wrap e poi accedendovi con
elem.children[0].dataset.gist:[wrap=dataTables gist="some_gist_id"] <table></table> [/wrap] -
Ma cosa succede se voglio più tabelle, ognuna con codice di elaborazione diverso nella funzione
dataSrco parametricolumnodomdifferenti?Esiste un modo per passare un file di configurazione JS a
dataTables.dataTable()?
3 Mi Piace
C’è un numero fisso di varianti che probabilmente useresti per le diverse tabelle, o avrai bisogno di varianti personalizzate per ciascuna tabella?
1 Mi Piace
Personalizzati per ogni tabella.
Il mio approccio attuale è creare file js di supporto con configurazioni diverse e sceglierli tramite un attributo nel blocco [wrap]. Quindi eseguo:
dataTables.dataTable(Object.assign(commonConfig, specificConfig(myAttributes)))
Ma sarei curioso di sapere se esiste una soluzione più flessibile.
1 Mi Piace