Quelqu'un a-t-il essayé d'intégrer Datatables dans le corps du sujet ?

Raghu_Nandan_Avula · Septembre 23, 2019, 12:59

Bonjour la communauté,

Quelqu’un a-t-il essayé d’intégrer Data tables dans le corps d’un sujet ? Un plugin ou un thème ?

Merci,

EricGT · Septembre 23, 2019, 1:10

J’ai essayé de créer des tableaux avec quelques liens vers des images dans une cellule, mais sans succès. Voir : Comment créer un joli tableau dans un message ?

Par extension, je pense que Discourse de base ne le permet pas.

Si c’est possible, j’aimerais savoir comment.

Comme le site sur lequel je me trouve ne peut pas ajouter de nouveaux plugins selon le plan/contrat, je n’ai pas pu explorer cette option.

Raghu_Nandan_Avula · Septembre 23, 2019, 1:20

Ouais, je ne sais pas comment mettre cela en œuvre.

EricGT · Septembre 23, 2019, 1:42

Pas le bateau entier, mais peut-être assez bien pour vous lancer.

Afficher entrées

Rechercher :

Nom	Poste	Bureau	Âge	Date de début	Salaire
Airi Satou	Comptable	Tokyo	33	2008/11/28	162 700 $
Angelica Ramos	Directeur général (DG)	Londres	47	2009/10/09	1 200 000 $
Ashton Cox	Auteur technique junior	San Francisco	66	2009/01/12	86 000 $
Bradley Greer	Ingénieur logiciel	Londres	41	2012/10/13	132 000 $
Brenden Wagner	Ingénieur logiciel	San Francisco	28	2011/06/07	206 850 $
Brielle Williamson	Spécialiste en intégration	New York	61	2012/12/02	372 000 $
Bruno Nash	Ingénieur logiciel	Londres	38	2011/05/03	163 500 $
Caesar Vance	Support avant-vente	New York	21	2011/12/12	106 450 $
Cara Stevens	Assistant commercial	New York	46	2011/12/06	145 600 $
Cedric Kelly	Développeur JavaScript senior	Édimbourg	22	2012/03/29	433 060 $
Nom	Poste	Bureau	Âge	Date de début	Salaire

Affichage de 1 à 10 sur 57 entrées

Précédent1 2 3 4 5 6Suivant

Le code HTML ci-dessus a été créé en ouvrant link fourni (en utilisant Chrome), en appuyant sur F12,
puis en sélectionnant HTML dans le visualiseur de code

ensuite (Windows) clic droit, sélectionnez Copier → Copier le code HTML externe

et collé dans ce message.

Je sais qu’il ne possède pas toutes les fonctionnalités de l’original, mais au moins vous pouvez comparer ce code HTML avec l’original et voir ce que Discourse filtre pour comprendre ce que vous pouvez ou ne pouvez pas faire.

Aussi, si quelqu’un de plus fiable peut convertir cela en un Wiki afin que d’autres puissent voir le code HTML brut, cela serait apprécié.

J’espère que cela aide.

MODIFICATION

En développant sur la copie et le collage, j’ai copié toute la page et l’ai collée dans un message sur try.discourse.org pour voir si les boutons de tri passeraient. Pas de chance.}

merefield · Septembre 23, 2019, 1:51

Ce résultat est simplement un tableau Markdown, pris en charge par Discourse :

Raghu_Nandan_Avula · Septembre 23, 2019, 1:53

Super. Mais dispose-t-il de fonctionnalités de tableau de données comme le tri et la recherche ?

EricGT · Septembre 23, 2019, 1:56

Non.

Ma meilleure hypothèse pour réaliser cela serait d’utiliser JavaScript, mais je ne sais pas dans quelle mesure cela sera filtré par Discourse. Lorsque j’ai rencontré les mêmes problèmes, j’en suis finalement arrivé à la conclusion qu’il serait plus facile de placer la page contenant les informations ailleurs et de fournir un lien. N’essayez pas de forcer Discourse à faire ce pour quoi il n’est pas conçu, et ne tentez pas de contourner la sécurité fournie par Discourse ; elle est là pour de bonnes raisons.

Raghu_Nandan_Avula · Septembre 23, 2019, 1:58

C’est vrai, ma meilleure option consiste à ajouter le tableau de données dans une page HTML et à l’intégrer dans un sujet Discourse à l’aide d’une iframe.

Johani · Septembre 23, 2019, 3:54

Datatables est un plugin jQuery. Les plugins jQuery peuvent être implémentés assez facilement dans Discourse. Il existe quelques exemples à ce sujet, comme les composants de thème Tiles et Slick.

Essentiellement, ce que vous devez faire, c’est créer un décorateur pour les publications contenant des tableaux que vous souhaitez cibler avec DataTables.

J’ai créé un exemple montrant comment procéder ici :

et j’ai également préparé un aperçu sur le créateur de thèmes :

https://theme-creator.discourse.org/theme/Johani/discourse_datetables

C’est évidemment un peu basique pour l’instant et il manque quelques styles, mais cela devrait constituer un bon point de départ, car le tri, la recherche et la pagination fonctionnent parfaitement.

Raghu_Nandan_Avula · Septembre 23, 2019, 6:01

C’est incroyable Merci beaucoup

Nacho_Caballero · Juin 27, 2021, 3:53

J’ai plusieurs tableaux que je souhaite inclure dans mon forum, et votre approche fonctionne parfaitement. J’ai créé ce fichier d’initialisation de composant de thème :

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: 'Mon ID' }, 
              { data: 'title', title: 'Mon Titre' }
            ],
            dom: 'Bfrt',
          });
        }
      );
    },
    { id: 'discourse-my-custom-data-tables', onlyStream: true }
  );
});

Et je charge le tableau dans le message en utilisant ceci :

[wrap=dataTables]
<table></table>
[/wrap]

Cependant, il y a plusieurs éléments que je souhaiterais personnaliser pour chaque tableau et je ne suis pas sûr de la marche à suivre.

Par exemple :

Je voudrais utiliser un ID de Gist différent pour chaque tableau. Cela devrait être assez simple en passant un attribut au wrap puis en y accédant via elem.children[0].dataset.gist :
```
[wrap=dataTables gist="some_gist_id"]
<table></table>
[/wrap]
```
Mais que faire si je veux plusieurs tableaux, chacun avec un code de traitement différent dans la fonction dataSrc ou des paramètres column ou dom différents ?

Existe-t-il un moyen de passer un fichier de configuration JS à dataTables.dataTable() ?

Johani · Juin 30, 2021, 7:44

Y a-t-il un nombre fixe de variantes que vous utiliserez probablement pour différents tableaux, ou devrez-vous en créer de personnalisées pour chaque tableau ?

Nacho_Caballero · Juin 30, 2021, 8:26

Des personnalisations spécifiques pour chaque tableau.

Mon approche actuelle consiste à créer des fichiers JavaScript d’aide avec différentes configurations et à choisir entre eux via un attribut dans le bloc [wrap]. Ensuite, je fais :

dataTables.dataTable(Object.assign(commonConfig, specificConfig(myAttributes)))

Mais je serais curieux de savoir s’il existe une solution plus flexible.

Sujet		Réponses	Vues
Interactive tables within posts Feature	5	1019	Mai 19, 2021
Are the tables on top of some posts markdown or a feature? Support	21	1131	Novembre 17, 2023
Adding a table to your post using markdown Using Discourse tutorial	26	33607	Juin 9, 2025
Where is the table icon in the editor? Feature completed	9	1575	Août 15, 2022
Embed Discourse Comments in Discourse Topic Development	7	260	Juillet 25, 2025

Quelqu'un a-t-il essayé d'intégrer Datatables dans le corps du sujet ?

Sujets connexes