هل جرب أحد دمج Datatables في جسم الموضوع؟

ساهم ميزة
1

Hello Community,

Did anyone try to embed Data tables into Topic Body ? Any plugin or theme ?

Thanks,

إعجابَين (2)
2

I tried making tables with a some links to images within a cell and failed. See: How to make a nice table in a post?

So by extension, I don’t think basic Discourse will allow this.

If it is possible I would like to know how.

Since the site I am on can not add more plug-ins per the plan/agreement, I could not run down that option path.

إعجاب واحد (1)
3

Yeah, I don’t know how to implement this.

4

Not the full boat, but maybe good enough to get you started.

Show 102550100 entries
Search:
Name Position Office Age Start date Salary
Airi Satou Accountant Tokyo 33 2008/11/28 $162,700
Angelica Ramos Chief Executive Officer (CEO) London 47 2009/10/09 $1,200,000
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Bradley Greer Software Engineer London 41 2012/10/13 $132,000
Brenden Wagner Software Engineer San Francisco 28 2011/06/07 $206,850
Brielle Williamson Integration Specialist New York 61 2012/12/02 $372,000
Bruno Nash Software Engineer London 38 2011/05/03 $163,500
Caesar Vance Pre-Sales Support New York 21 2011/12/12 $106,450
Cara Stevens Sales Assistant New York 46 2011/12/06 $145,600
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
Name Position Office Age Start date Salary
Showing 1 to 10 of 57 entries

The above HTML was created by opening link provided (using Chorme), press F12,
select HTML in code viewer

image
image.png1213×735 87.6 KB

then (Windows) right mouse select Copy -> Copy OutterHTML

and pasted into this post.

I know it doesn’t have all of the bells and whistles of the original, but at least you can compare this HTML with the original and see what Discourse filters out to learn what you can and can not do.

Also if someone with more trust can convert this to a Wiki so others can view the raw HTML it would be appreciated.

HTH

EDIT

Expanding on cutting and pasting, I cut the full page out and pasted into a post at try.discourse.org to see if the buttons for sorting would make it through. No such luck.

إعجاب واحد (1)
5

That result is just a Markdown table which is supported by Discourse:

https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#tables

إعجابَين (2)
6

Great. But does it have Data table functionality like sorting, searching ?

7

No.

My best guess on how to do that would be to use JavaScript, but I don’t know how much of that will be filtered out of Discourse. When I ran into the same line of problems, I eventually came to the conclusion that it would be easier to to put the page with the info somewhere else and provide a link. Don’t try and force Discourse into something it is not, and don’t try and circumvent the security Discourse provides, it is there for a good reason.

3 إعجابات
8

That’s true, My best option is adding the datatable in an html page and embed it into Discourse topic using iframe.

9

Datatables is a jQuery plugin. jQuery plugins can be implemented quite easily in Discourse. There are a couple of examples of this like the Tiles and Slick gallery theme components.

Essentially, what you need to do is to create a decorator for posts that contain tables that you want to target with dataTables.

I’ve created an example of how you can do that here

https://github.com/hnb-ku/dataTables_Demo

and created a preview for it on theme creator here

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

It’s obviously a bit basic for now, and it’s missing some styles but it should be a good starting point as sorting, searching and pagination work just fine.

12 إعجابًا
10

This is incredibe :slight_smile: Thank you very much

3 إعجابات
11

لدي عدة جداول أود تضمينها في منتداي، وطريقتك تعمل بشكل مثالي. لقد أنشأت ملف مُهيئ لمكون السمة هذا:

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 مختلف لكل جدول. يجب أن يكون ذلك سهلاً نسبيًا من خلال تمرير سمة إلى wrap ثم الوصول إليها باستخدام elem.children[0].dataset.gist:

    [wrap=dataTables gist="some_gist_id"]
<table></table>
[/wrap]

  • ولكن ماذا لو أردت جداول متعددة، كل منها يحتوي على كود معالجة مختلف في دالة dataSrc أو معاملات column أو dom مختلفة؟

    هل توجد طريقة لتمرير ملف إعدادات JS إلى dataTables.dataTable()؟

3 إعجابات
12

هل يوجد عدد محدد من المتغيرات من المرجح استخدامها للجداول المختلفة، أم ستحتاج إلى استخدام متغيرات مخصصة لكل جدول؟

إعجاب واحد (1)
13

تخصيص واحد لكل جدول.

منهجيتي الحالية هي إنشاء ملفات JS مساعدة تحتوي على تكوينات مختلفة واختيار بينها عبر سمة في كتلة [wrap]. ثم أقوم بما يلي:

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

لكنني سأكون فضوليًا لمعرفة ما إذا كانت هناك حل أكثر مرونة.

إعجاب واحد (1)