将 html 表格导入 Tabulator 时遇到问题

Question

我最近从 Tabulator 4.5 切换到 5.0，我的旧代码遇到了一些问题。我过去只是为现有的 Drupal HTML 表格提供 Tabulator 皮肤，但是，现在在生成表格时，数据会丢失，并且不会显示任何行。这是一个例子：

HTML

<table data-drupal-selector="edit-cimek" class="responsive-enabled table table-hover table-striped" id="edit-cimek"
    data-striping="1">
    <thead>
        <tr>
            <th>Hivatalos név</th>
            <th>Címtípus</th>
            <th>Teljes cím</th>
            <th>Kontakt</th>
            <th>Gombok</th>
        </tr>
    </thead>

    <tbody>
        <tr class="odd">
            <td>AAAAAAAAAAAAAAAAAAAA</td>
            <td>BBBBBBBBBB</td>
            <td>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</td>
            <td>DDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDDD</td>
            <td><a id='cimtorol_5' class='cimtorol'><img title='Törlés'
                        src='/src/here' alt='Törlés' width='30px'></a> <a
                    id='cimmodosit_5' class='cimmodosit'><img title='Módosítás'
                        src='/src/here' alt='Módosítás' width='30px'></a>
            </td>
        </tr>
        <tr class="even">
            <td>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</td>
            <td>BBBBBBBBB</td>
            <td>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</td>
            <td>D</td>
            <td><a id='cimtorol_1' class='cimtorol'><img title='Törlés'
                        src='/src/here' alt='Törlés' width='30px'></a> <a
                    id='cimmodosit_1' class='cimmodosit'><img title='Módosítás'
                        src='/src/here' alt='Módosítás' width='30px'></a>
            </td>
        </tr>
    </tbody>
</table>

JS

var table = new Tabulator("#edit-cimek", {
    columns: [
        { title: Drupal.t('Official name'), field: "name", sorter: "string" },
        { title: Drupal.t('Address type'), field: "type", sorter: "number" },
        { title: Drupal.t('Full address'), field: "address", sorter: "string" },
        { title: Drupal.t('Contact'), field: "kapcstarto", sorter: "number" },
        {
            title: Drupal.t('Buttons'), field: "buttons", sorter: "string", formatter: "html", cellClick: function (e, cell) {
                e.preventDefault();
            }
        }
    ]
});

可能是什么问题，为什么在 4.5 中可以工作，但在 5.0 中却不起作用？

Answer 1

您首先将其粘贴到 HTML 中，然后将其导入 Tabulator 中，有什么原因吗？

HTML 导入支持主要是作为对过去以这种方式注入数据的旧网站的遗留支持。

正确的现代方法是将其作为 JSON 或数组传递到 Tabulator 中

https://tabulator.info/docs/6.2/data#array