Hola Comunidad,
¿Alguien ha intentado incrustar tablas de datos en el cuerpo del tema? ¿Algún plugin o tema?
Gracias,
2 Me gusta
Intenté crear tablas con algunos enlaces a imágenes dentro de una celda, pero no funcionó. Véase: ¿Cómo crear una tabla bonita en una publicación?
Por lo tanto, es poco probable que Discourse básico permita esto.
Si es posible, me gustaría saber cómo.
Dado que el sitio en el que estoy no puede agregar más complementos según el plan/acuerdo, no pude explorar esa opción.
1 me gusta
Sí, no sé cómo implementar esto.
No es el barco completo, pero quizás sea suficiente para empezar.
Mostrar entradas
Buscar:
| Nombre | Puesto | Oficina | Edad | Fecha de inicio | Salario |
|---|---|---|---|---|---|
| Airi Satou | Contable | Tokio | 33 | 2008/11/28 | $162,700 |
| Angelica Ramos | Director Ejecutivo (CEO) | Londres | 47 | 2009/10/09 | $1,200,000 |
| Ashton Cox | Autor Técnico Junior | San Francisco | 66 | 2009/01/12 | $86,000 |
| Bradley Greer | Ingeniero de Software | Londres | 41 | 2012/10/13 | $132,000 |
| Brenden Wagner | Ingeniero de Software | San Francisco | 28 | 2011/06/07 | $206,850 |
| Brielle Williamson | Especialista en Integración | Nueva York | 61 | 2012/12/02 | $372,000 |
| Bruno Nash | Ingeniero de Software | Londres | 38 | 2011/05/03 | $163,500 |
| Caesar Vance | Soporte Pre-Ventas | Nueva York | 21 | 2011/12/12 | $106,450 |
| Cara Stevens | Asistente de Ventas | Nueva York | 46 | 2011/12/06 | $145,600 |
| Cedric Kelly | Desarrollador Senior de Javascript | Edimburgo | 22 | 2012/03/29 | $433,060 |
| Nombre | Puesto | Oficina | Edad | Fecha de inicio | Salario |
Mostrando 1 a 10 de 57 entradas
El HTML anterior se creó abriendo enlace proporcionado (usando Chrome), pulsando F12,
seleccionando HTML en el visor de código
y luego (Windows) haciendo clic derecho en el ratón, seleccionando Copiar → Copiar HTML externo
y pegándolo en este mensaje.
Sé que no tiene todos los adornos del original, pero al menos puedes comparar este HTML con el original y ver qué filtra Discourse para aprender qué puedes y qué no puedes hacer.
También, si alguien con más confianza puede convertir esto en un Wiki para que otros puedan ver el HTML sin procesar, se lo agradecería.
Espero que ayude.
EDITAR
Ampliando sobre el corte y pegado, corté la página completa y la pegué en un mensaje en try.discourse.org para ver si los botones de ordenación llegarían. Sin suerte.
1 me gusta
Ese resultado es simplemente una tabla Markdown, la cual es compatible con Discourse:
2 Me gusta
Genial. ¿Pero tiene funcionalidad de tabla de datos como ordenamiento y búsqueda?
No.
Mi mejor suposición sobre cómo hacerlo sería usar JavaScript, pero no sé cuánto de eso será filtrado en Discourse. Cuando me encontré con el mismo tipo de problemas, finalmente llegué a la conclusión de que sería más fácil colocar la página con la información en otro lugar y proporcionar un enlace. No intentes forzar a Discourse a hacer algo para lo que no está diseñado, ni intentes eludir la seguridad que ofrece Discourse; está ahí por una buena razón.
3 Me gusta
Eso es cierto, mi mejor opción es agregar la tabla de datos en una página HTML e incrustarla en un tema de Discourse usando un iframe.
Datatables es un complemento de jQuery. Los complementos de jQuery se pueden implementar con bastante facilidad en Discourse. Hay varios ejemplos de esto, como los componentes de tema de galerías Tiles y Slick.
Básicamente, lo que necesitas hacer es crear un decorador para las publicaciones que contengan tablas que quieras aplicar con dataTables.
He creado un ejemplo de cómo puedes hacerlo aquí:
y también he creado una vista previa en el creador de temas aquí:
https://theme-creator.discourse.org/theme/Johani/discourse_datetables
Por ahora es algo básico y le faltan algunos estilos, pero debería ser un buen punto de partida, ya que la ordenación, la búsqueda y la paginación funcionan perfectamente.
12 Me gusta
¡Esto es increíble 
Muchas gracias!
3 Me gusta
Tengo varias tablas que me gustaría incluir en mi foro y tu enfoque funciona perfectamente. He creado este archivo inicializador de componente de 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: 'Mi ID' },
{ data: 'title', title: 'Mi Título' }
],
dom: 'Bfrt',
});
}
);
},
{ id: 'discourse-my-custom-data-tables', onlyStream: true }
);
});
Y cargo la tabla en la publicación usando esto:
[wrap=dataTables]
<table></table>
[/wrap]
Sin embargo, hay varias cosas que me gustaría personalizar para cada tabla y no estoy seguro de cómo proceder.
Por ejemplo:
-
Me gustaría usar un ID de Gist diferente para cada tabla. Eso debería ser bastante sencillo pasando un atributo al wrap y luego accediendo a él con
elem.children[0].dataset.gist:[wrap=dataTables gist="some_gist_id"] <table></table> [/wrap] -
Pero, ¿qué pasa si quiero múltiples tablas, cada una con un código de procesamiento diferente en la función
dataSrco con parámetroscolumnodomdistintos?¿Existe alguna manera de pasar un archivo de configuración JS a
dataTables.dataTable()?
3 Me gusta
¿Hay un número fijo de variaciones que probablemente usarías para diferentes tablas, o necesitarás usar personalizadas para cada tabla?
1 me gusta
Personalizados para cada tabla.
Mi enfoque actual es crear archivos JS de ayuda con diferentes configuraciones y elegir entre ellos mediante un atributo en el bloque [wrap]. Luego hago:
dataTables.dataTable(Object.assign(commonConfig, specificConfig(myAttributes)))
Pero me gustaría saber si existe una solución más flexible.
1 me gusta