커뮤니티 여러분 안녕하세요,
누군가 Data tables를 주제 본문에 임베드해 보신 적 있으신가요? 어떤 플러그인이나 테마를 사용하셨나요?
감사합니다,
2개의 좋아요
셀 안에 이미지 링크를 몇 개 넣어서 표를 만들어 보려고 했으나 실패했습니다. 참고: 게시물에 좋은 표를 만드는 방법?
따라서 확장해서 말하자면, 기본 Discourse에서는 이를 지원하지 않는다고 생각합니다.
가능하다면 어떻게 해야 하는지 알고 싶습니다.
제가 있는 사이트에서는 요금제/계약에 따라 추가 플러그인을 설치할 수 없기 때문에, 그 옵션을 확인해 볼 수 없었습니다.
1개의 좋아요
네, 이걸 구현하는 방법을 모르겠습니다.
완벽하진 않지만, 시작하는 데는 충분히 쓸 만할 것입니다.
개 항목 표시
검색:
| 이름 | 직책 | 사무소 | 나이 | 입사일 | 연봉 |
|---|---|---|---|---|---|
| Airi Satou | 회계사 | 도쿄 | 33 | 2008/11/28 | $162,700 |
| Angelica Ramos | 최고경영자 (CEO) | 런던 | 47 | 2009/10/09 | $1,200,000 |
| Ashton Cox | 주니어 기술 저술가 | 샌프란시스코 | 66 | 2009/01/12 | $86,000 |
| Bradley Greer | 소프트웨어 엔지니어 | 런던 | 41 | 2012/10/13 | $132,000 |
| Brenden Wagner | 소프트웨어 엔지니어 | 샌프란시스코 | 28 | 2011/06/07 | $206,850 |
| Brielle Williamson | 통합 전문가 | 뉴욕 | 61 | 2012/12/02 | $372,000 |
| Bruno Nash | 소프트웨어 엔지니어 | 런던 | 38 | 2011/05/03 | $163,500 |
| Caesar Vance | 세일즈 지원 | 뉴욕 | 21 | 2011/12/12 | $106,450 |
| Cara Stevens | 세일즈 어시스턴트 | 뉴욕 | 46 | 2011/12/06 | $145,600 |
| Cedric Kelly | 시니어 자바스크립트 개발자 | 에든버러 | 22 | 2012/03/29 | $433,060 |
| 이름 | 직책 | 사무소 | 나이 | 입사일 | 연봉 |
전체 57개 항목 중 1~10개 표시
위 HTML은 link를 열어(Chrome 사용) F12를 누르고,
코드 뷰어에서 HTML을 선택하여 생성했습니다.
그 후 (Windows에서) 마우스 오른쪽 버튼으로 복사 → 외부 HTML 복사를 선택하고
이 게시물에 붙여넣었습니다.
원본의 모든 기능이 포함된 것은 아니지만, 적어도 이 HTML을 원본과 비교하여 Discourse가 무엇을 필터링하는지, 그리고 무엇을 할 수 있고 무엇을 할 수 없는지 배울 수 있습니다.
또한 더 높은 신뢰 등급을 가진 누군가가 이를 Wiki로 변환하여 다른 사람들이 원시 HTML을 볼 수 있게 해준다면 감사하겠습니다.
도움이 되길 바랍니다.
수정
잘라내고 붙여넣는 것에 대해 추가하자면, 전체 페이지를 잘라 try.discourse.org의 게시물에 붙여넣어 정렬 버튼이 통과되는지 확인해 보았습니다. 아쉽게도 그렇지 않았습니다.
1개의 좋아요
해당 결과는 Discourse에서 지원되는 Markdown 테이블일 뿐입니다:
2개의 좋아요
좋습니다. 그런데 정렬, 검색 같은 데이터 테이블 기능이 있나요?
아니요.
그걸 어떻게 해야 할지 제 최선의 추측은 JavaScript를 사용하는 것인데, Discourse에서 얼마나 많이 필터링되어 제거될지는 잘 모르겠습니다. 제가 같은 문제에 부딪혔을 때, 결국 정보를 담은 페이지를 다른 곳에 올려두고 링크를 제공하는 것이 더 쉽다는 결론에 도달했습니다. Discourse를 본래의 용도가 아닌 것으로 억지로 바꾸려 하지 마시고, Discourse가 제공하는 보안 기능을 우회하려 하지 마세요. 그 이유는 정당한 것이기 때문입니다.
3개의 좋아요
맞아요. 제 최선의 선택은 HTML 페이지에 데이터 테이블을 추가한 후 iframe을 사용해 디스커스(Discourse) 주제에 임베드하는 것입니다.
Datatables는 jQuery 플러그인입니다. jQuery 플러그인은 Discourse에서 비교적 쉽게 구현할 수 있습니다. Tiles와 Slick 갤러리 테마 컴포넌트와 같은 예시가 몇 가지 있습니다.
기본적으로, dataTables로 처리하려는 테이블이 포함된 게시물을 대상으로 하는 데코레이터를 생성해야 합니다.
이를 수행하는 방법에 대한 예시를 여기에 만들었습니다.
그리고 테마 크리에이터에서 미리보기를 만들었습니다.
https://theme-creator.discourse.org/theme/Johani/discourse_datetables
현재는 다소 기본적이며 일부 스타일이 빠져 있지만, 정렬, 검색, 페이지네이션이 모두 정상적으로 작동하므로 좋은 출발점이 될 것입니다.
12개의 좋아요
정말 놀랍습니다 
정말 감사합니다
3개의 좋아요
포럼에 포함하고 싶은 테이블이 여러 개 있는데, 당신의 방식이 완벽하게 작동합니다. 이 테마 컴포넌트 초기화 파일을 만들었습니다:
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 }
);
});
그리고 포스트에서 이 방식으로 테이블을 로드합니다:
[wrap=dataTables]
<table></table>
[/wrap]
하지만 테이블별로 커스터마이즈하고 싶은 부분이 여러 가지 있는데, 어떻게 해야 할지 모르겠습니다.
예를 들어:
-
각 테이블마다 다른 Gist ID를 사용하고 싶습니다. wrap에 속성을 전달하고
elem.children[0].dataset.gist로 접근하면 될 것 같아서 충분히 쉬울 것 같습니다:[wrap=dataTables gist="some_gist_id"] <table></table> [/wrap] -
하지만
dataSrc함수에서 처리 코드가 다르거나column또는dom매개변수가 다른 여러 테이블을 사용하려면 어떻게 해야 하나요?dataTables.dataTable()에 JS 설정 파일을 전달하는 방법이 있을까요?
3개의 좋아요
각 테이블에 사용할 변형의 수가 정해져 있거나, 테이블마다 커스텀 변형을 사용해야 하는가요?
1개의 좋아요
각 테이블마다 커스텀 설정을 사용했습니다.
현재 저의 접근 방식은 다양한 구성으로 된 헬퍼 JS 파일을 생성한 후, [wrap] 블록의 속성을 통해 그 중 하나를 선택하는 것입니다. 그리고 다음과 같이 실행합니다:
dataTables.dataTable(Object.assign(commonConfig, specificConfig(myAttributes)))
더 유연한 솔루션이 있는지 궁금합니다.
1개의 좋아요