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

ساهم ميزة
1

مرحبًا بالمجتمع،

هل جرب أحدكم تضمين جداول البيانات في محتوى الموضوع؟ هل هناك أي إضافة أو سمة مناسبة لذلك؟

شكرًا لكم،

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

لقد حاولت إنشاء جداول تحتوي على بعض الروابط إلى صور داخل خلية واحدة لكنني فشلت. انظر: كيف أصنع جدولاً جميلاً في منشور؟

لذلك، بالتعويض، لا أعتقد أن منصة Discourse الأساسية ستسمح بذلك.

إذا كان ذلك ممكنًا، فأود معرفة كيفية القيام به.

بما أن الموقع الذي أعمل عليه لا يمكنه إضافة إضافات أخرى وفقًا للخطة/الاتفاق، لم أستطع متابعة هذا المسار من الخيارات.

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

نعم، لا أعرف كيفية تنفيذ هذا.

4

ليس القارب الكامل، لكنه ربما كافٍ لتبدأ به.

عرض إدخالات
بحث:
الاسمالوظيفةالمكتبالعمرتاريخ البدءالراتب
أيري ساتومحاسبطوكيو332008/11/28$162,700
أنجيلا راموسالرئيس التنفيذي (CEO)لندن472009/10/09$1,200,000
أشتون كوكسمؤلف تقني مبتدئسان فرانسيسكو662009/01/12$86,000
برادلي غرييرمهندس برمجياتلندن412012/10/13$132,000
بريندن واغنرمهندس برمجياتسان فرانسيسكو282011/06/07$206,850
برييل ويليامسونأخصائي تكاملنيويورك612012/12/02$372,000
برونو ناشمهندس برمجياتلندن382011/05/03$163,500
قيصر فانسدعم ما قبل البيعنيويورك212011/12/12$106,450
كارا ستيفنزمساعد مبيعاتنيويورك462011/12/06$145,600
سيدر كيليمطور جافا سكريبت أولإدنبرة222012/03/29$433,060
الاسمالوظيفةالمكتبالعمرتاريخ البدءالراتب
عرض 1 إلى 10 من أصل 57 إدخال

تم إنشاء HTML أعلاه عن طريق فتح رابط المقدم (باستخدام Chrome)، الضغط على F12،
اختيار HTML في عارض الكود

image
image1213×735 87.6 KB

ثم (في نظام Windows) انقر بزر الماوس الأيمن واختر نسخ → نسخ OuterHTML

ثم ألصقها في هذا المنشور.

أعلم أنه لا يحتوي على كل المزايا الإضافية للأصل، لكن على الأقل يمكنك مقارنة هذا HTML بالأصل ومعرفة ما يقوم Discourse بتصفية منه لتتعلم ما يمكنك وما لا يمكنك فعله.

أيضًا، إذا كان بإمكان شخص يتمتع بمزيد من الثقة تحويل هذا إلى ويكي حتى يتمكن الآخرون من عرض HTML الخام، فسأكون ممتنًا.

آمل أن يكون ذلك مفيدًا

تعديل

توسيعًا حول القص واللصق، قمت بقص الصفحة كاملة ولصقها في منشور على try.discourse.org لمعرفة ما إذا كانت أزرار الفرز ستنتقل بنجاح. للأسف، لم ينجح الأمر.

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

هذه النتيجة مجرد جدول Markdown مدعوم من Discourse:

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

عظيم. لكن هل يتضمن وظائف جدول بيانات مثل الفرز والبحث؟

7

لا.

أفضل تخمين لدي لكيفية القيام بذلك هو استخدام JavaScript، لكنني لا أعرف كم منها سيتم تصفيته من Discourse. عندما واجهت نفس سلسلة المشاكل، توصلت في النهاية إلى استنتاج أنه سيكون من الأسهل وضع الصفحة التي تحتوي على المعلومات في مكان آخر وتوفير رابط. لا تحاول إجبار Discourse على أن يكون شيئًا ليس عليه، ولا تحاول تجاوز الأمان الذي يوفره Discourse، فهو موجود لسبب وجيه.

3 إعجابات
8

هذا صحيح، وخياري الأفضل هو إضافة جدول البيانات في صفحة HTML وتضمينه في موضوع Discourse باستخدام إطار مضمن (iframe).

9

تُعد Datatables إضافة لـ jQuery. ويمكن تنفيذ إضافات jQuery بسهولة نسبية في Discourse. هناك عدة أمثلة على ذلك مثل مكونات موضوع Tiles و Slick المعرض.

في جوهر الأمر، ما تحتاج إلى فعله هو إنشاء مُزيّن (decorator) للمنشورات التي تحتوي على جداول تريد استهدافها باستخدام dataTables.

لقد قمت بإنشاء مثال يوضح كيفية القيام بذلك هنا

كما أنشأت معاينة له في منشئ المواضيع هنا

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

من الواضح أن الأمر لا يزال بسيطًا بعض الشيء في الوقت الحالي، وينقصه بعض الأنماط، لكنه يجب أن يكون نقطة انطلاق جيدة حيث تعمل الفرز والبحث والترقيم بشكل صحيح.

12 إعجابًا
10

هذا لا يصدق :slight_smile: شكراً جزيلاً لك

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)