Olá Comunidade,
Alguém tentou incorporar Data tables no corpo do tópico? Algum plugin ou tema?
Obrigado,
2 curtidas
Tentei criar tabelas com alguns links para imagens dentro de uma célula, mas não consegui. Veja: Como fazer uma tabela bonita em um post?
Portanto, por extensão, acho que o Discourse básico não permite isso.
Se for possível, gostaria de saber como.
Como o site em que estou não pode adicionar mais plug-ins de acordo com o plano/acordo, não pude explorar essa opção.
1 curtida
Sim, não sei como implementar isso.
Não é o barco inteiro, mas talvez seja bom o suficiente para você começar.
Mostrar entradas
Pesquisar:
| Nome | Cargo | Escritório | Idade | Data de início | Salário |
|---|---|---|---|---|---|
| Airi Satou | Contador | Tóquio | 33 | 2008/11/28 | $162,700 |
| Angelica Ramos | Diretor Executivo (CEO) | Londres | 47 | 2009/10/09 | $1.200.000 |
| Ashton Cox | Autor Técnico Júnior | San Francisco | 66 | 2009/01/12 | $86.000 |
| Bradley Greer | Engenheiro de Software | Londres | 41 | 2012/10/13 | $132.000 |
| Brenden Wagner | Engenheiro de Software | San Francisco | 28 | 2011/06/07 | $206.850 |
| Brielle Williamson | Especialista em Integração | New York | 61 | 2012/12/02 | $372.000 |
| Bruno Nash | Engenheiro de Software | Londres | 38 | 2011/05/03 | $163.500 |
| Caesar Vance | Suporte Pré-Vendas | New York | 21 | 2011/12/12 | $106.450 |
| Cara Stevens | Assistente de Vendas | New York | 46 | 2011/12/06 | $145.600 |
| Cedric Kelly | Desenvolvedor Sênior de Javascript | Edimburgo | 22 | 2012/03/29 | $433.060 |
| Nome | Cargo | Escritório | Idade | Data de início | Salário |
Mostrando 1 a 10 de 57 entradas
O HTML acima foi criado abrindo link fornecido (usando Chrome), pressionando F12,
selecionando HTML no visualizador de código
então (Windows) clique com o botão direito do mouse em Copiar → Copiar HTML Externo
e colado nesta postagem.
Sei que não tem todos os recursos do original, mas pelo menos você pode comparar este HTML com o original e ver o que o Discourse filtra para aprender o que você pode e não pode fazer.
Também, se alguém com mais confiança puder converter isso em uma Wiki para que outros possam visualizar o HTML bruto, seria muito apreciado.
Espero que ajude
EDIT
Expandindo sobre cortar e colar, eu cortei a página inteira e colei em uma postagem em try.discourse.org para ver se os botões de ordenação passariam. Sem sorte.
1 curtida
Esse resultado é apenas uma tabela Markdown, que é suportada pelo Discourse:
2 curtidas
Ótimo. Mas ele possui funcionalidade de tabela de dados, como ordenação e pesquisa?
Não.
Minha melhor suposição sobre como fazer isso seria usar JavaScript, mas não sei quanto disso será filtrado pelo Discourse. Quando me deparei com o mesmo tipo de problema, cheguei à conclusão de que seria mais fácil colocar a página com as informações em outro lugar e fornecer um link. Não tente forçar o Discourse a fazer algo para o qual ele não foi feito e não tente contornar a segurança que o Discourse oferece; ela existe por um bom motivo.
3 curtidas
Isso é verdade. Minha melhor opção é adicionar a tabela de dados em uma página HTML e incorporá-la ao tópico do Discourse usando um iframe.
Datatables é um plugin do jQuery. Plugins do jQuery podem ser implementados com bastante facilidade no Discourse. Existem alguns exemplos disso, como os componentes de tema Tiles e Slick para galerias de imagens.
Essencialmente, o que você precisa fazer é criar um decorador para posts que contenham tabelas que você deseja direcionar com o dataTables.
Criei um exemplo de como fazer isso aqui:
e também uma prévia dele no criador de temas:
https://theme-creator.discourse.org/theme/Johani/discourse_datetables
Obviamente, está um pouco básico no momento e faltam alguns estilos, mas deve ser um bom ponto de partida, pois a ordenação, a busca e a paginação funcionam perfeitamente.
12 curtidas
Isso é incrível 
Muito obrigado
3 curtidas
Tenho várias tabelas que gostaria de incluir no meu fórum e sua abordagem funciona perfeitamente. Criei este arquivo de inicializador de componente do 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: 'Meu ID' },
{ data: 'title', title: 'Meu Título' }
],
dom: 'Bfrt',
});
}
);
},
{ id: 'discourse-my-custom-data-tables', onlyStream: true }
);
});
E carrego a tabela no post usando isto:
[wrap=dataTables]
<table></table>
[/wrap]
No entanto, há várias coisas que gostaria de personalizar para cada tabela e não tenho certeza de como proceder.
Por exemplo:
-
Gostaria de usar um ID de Gist diferente para cada tabela. Isso deve ser simples o suficiente passando um atributo para o wrap e acessando-o com
elem.children[0].dataset.gist:[wrap=dataTables gist="algum_gist_id"] <table></table> [/wrap] -
Mas e se eu quiser múltiplas tabelas, cada uma com código de processamento diferente na função
dataSrcou parâmetroscolumnoudomdiferentes?Existe uma maneira de passar um arquivo de configuração JS para
dataTables.dataTable()?
3 curtidas
Existe um número definido de variações que você provavelmente usaria para diferentes tabelas, ou você precisará usar variações personalizadas para cada tabela?
1 curtida
Crie um para cada tabela.
Minha abordagem atual é criar arquivos de ajuda em JS com configurações diferentes e escolher entre eles por meio de um atributo no bloco [wrap]. Em seguida, faço:
dataTables.dataTable(Object.assign(commonConfig, specificConfig(myAttributes)))
Mas ficaria curioso em saber se existe uma solução mais flexível.
1 curtida