有人尝试将 Datatables 嵌入到主题正文中吗？

贡献 功能
1

大家好，

有人尝试将 Data tables 嵌入到主题正文中吗？有没有相关的插件或主题？

谢谢，

2 个赞
2

我尝试在单元格内创建包含图片链接的表格，但失败了。参见：如何在帖子中制作漂亮的表格？

因此，可以推断基本的 Discourse 功能可能不支持此操作。

如果确实可行，请告知具体方法。

由于我所使用的网站根据计划/协议无法添加更多插件，因此我无法尝试这一方案。

1 个赞
3

是的，我不知道如何实现这一点。

4

虽然不是完整的内容，但也许足以让你入门。

显示 条条目
搜索：
姓名职位办公室年龄开始日期薪资
Airi Satou会计师东京332008/11/28$162,700
Angelica Ramos首席执行官 (CEO)伦敦472009/10/09$1,200,000
Ashton Cox初级技术作家旧金山662009/01/12$86,000
Bradley Greer软件工程师伦敦412012/10/13$132,000
Brenden Wagner软件工程师旧金山282011/06/07$206,850
Brielle Williamson集成专家纽约612012/12/02$372,000
Bruno Nash软件工程师伦敦382011/05/03$163,500
Caesar Vance售前支持纽约212011/12/12$106,450
Cara Stevens销售助理纽约462011/12/06$145,600
Cedric Kelly高级 JavaScript 开发者爱丁堡222012/03/29$433,060
姓名职位办公室年龄开始日期薪资
显示第 1 到 10 条，共 57 条

上述 HTML 是通过打开提供的 链接（使用 Chrome），按 F12，在代码查看器中选择 HTML，

image
image1213×735 87.6 KB

然后（在 Windows 上）右键点击选择 复制 → 复制 OuterHTML

并粘贴到此帖子中。

我知道它并不具备原版的所有功能，但至少你可以将此 HTML 与原版进行比较，看看 Discourse 过滤掉了什么，从而了解你能做什么、不能做什么。

另外，如果有一位更有权限的人能将此转换为 Wiki，以便其他人查看原始 HTML，我们将不胜感激。

希望这能帮到你

编辑

关于复制和粘贴的补充说明：我复制了整个页面并粘贴到 try.discourse.org 的 帖子 中，以测试排序按钮是否能保留下来。很遗憾，未能成功。

1 个赞
5

该结果只是一个 Markdown 表格，Discourse 支持该格式：

2 个赞
6

很好。但它是否具备数据表功能，例如排序和搜索？

7

没有。

关于如何实现这一点，我的最佳猜测是使用 JavaScript，但我不确定 Discourse 会过滤掉多少此类内容。当我遇到同样的问题时，我最终得出结论：将包含信息的页面放在其他地方并提供链接会更简单。不要试图强迫 Discourse 去做它不擅长的事，也不要试图绕过 Discourse 提供的安全机制，这些安全机制的存在是有充分理由的。

3 个赞
8

确实如此，我的最佳方案是将数据表添加到一个 HTML 页面中，然后使用 iframe 将其嵌入到 Discourse 主题里。

9

DataTables 是一个 jQuery 插件。jQuery 插件可以非常容易地在 Discourse 中实现。这里有几个示例，例如 Tiles 和 Slick 图库主题组件。

基本上，您需要做的是为包含您希望使用 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 ID。这应该很简单，只需向 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 个赞