Question

我正在尝试使用jQuery数据表来响应显示数据左侧的列以显示隐藏的列。

此示例显示了此示例中的api / reference docs：

https://datatables.net/extensions/responsive/examples/child-rows/column-control.html

它说我应该设置：

responsive: {
    details: {
        type: 'column'
    }
}

我已经完成了，但是当我这样做时，我收到以下错误：

Requested unknown parameter '0' for row 0

我要求您查看此内容：https://www.datatables.net/manual/tech-notes/4

通过技术说明，我看不出为什么会出现这种错误。

我的datatables配置选项（删节）看起来像这样（请注意第一列设置为control列。）

var table = $('#list').DataTable({
            responsive: {
                details: {
                    type: 'column',
                    target: 0
                }
            },
            columns: [
                {                        
                    className: 'control',
                    orderable: false
                },
                {
                    data: 'Id',
                    className: 'never'
                },
                {
                    data: 'EventDate',
                    className: 'desktop'
                }
    ]});

我的HTML（删节）设置如下（请注意包含控制列的第一个th）。

<table class="table dt-responsive no-wrap dataTable table-striped table-bordered table-hover" id="bet-list">
    <thead>
    <tr>
        <th></th>
        <th>Id</th>
        <th>Event Date</th>
        <th>Event</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>

如果我没有设置类型并让控件在第一个数据列中内联出现，那么一切正常。令人烦恼的是，即使在错误之后，控件也会显示在自己的列中并且表现得如我所期望的那样，所以我不太确定错误是什么。

Answer 1

我设法通过执行以下操作解决了这个问题：

确保HTML包含控件列的空白。
确保我的列始终设置为visible: false。

在数据表中添加columnDef选项，我看起来像这样：

        columnDefs: [
            {
                targets: 0,
                orderable: false,
                className: 'all control'
            }
        ]

设置您想要成为控件的列以引用某个服务器端列，在我的情况下，我在我的服务器端函数中添加了一个名为“Control”的字段，该字段只返回一个空字符串。然后我将其添加到我的columns数组的前面，如下所示：
```
        columns: [
            {
                data: 'Control'
            },
```
我在数据表上设置了响应目标第一列的配置。

responsive: { details: { type: 'column', target: 0 } }

我发现列之间的关系，columnDefs和响应式配置由于'targets'属性而混淆，这在文档中没有很好地解释。

以下是我现在的理解。

responsive.details.target值告诉响应哪个列索引触发响应行为，因此在列布局的情况下，它应该设置为您想要单击事件的列。

HTML需要在控件列中有<th>，这需要与列数组记录配对。列数组记录需要有一些数据要绑定。

您的服务器端数据需要具有列数组可以附加的内容，否则我最终将所有数据移到左侧一列。在我的情况下，我只输出一个空字符串的字段。

似乎需要columnDef，即使我在列上设置了与classNames相同的属性。 columnDefs中的targets选项告诉datatables应用设置的列。所以在我的例子中它设置了orderable和className属性。

Answer 2

您不必返回空字符串（@dougajmcdonald 的第 4 点）。

这就足够了：

columns: [
   ...
   ...
   {data: null, defaultContent: '', orderable: false, searchable: false}
]

HTML和数据应该如何使用DataTable响应显示类型“列”？

2 个答案: