带有 colspan 的数据表，警告：请求的未知参数

Posted 2023-05-07

【中文标题】带有 colspan 的数据表，警告：请求的未知参数

【英文标题】：DataTables with colspan, Warning: Requested unknown parameter

【发布时间】：2015-08-03 06:31:12

【问题描述】：

我有一个在表格中呈现模型的视图。我正在使用 Razor 在页面首次加载时显示表格。

我想使用 DataTables.net 插件来应用排序并创建我自己的过滤。我这样应用插件：

var researchTable = $("#research-docs").DataTable();

页面加载时出现模式错误：

我对此进行了研究，这似乎表明我没有正确的列数，或者我正在呈现的数据与正在返回的列之间存在不匹配。

我的剃刀代码：

 <table id="research-docs" class="table table-hover table-striped table-library-research">
<thead>
    <tr>
        <th>Date</th>
        <th >Title</th>
        <th>Sector</th>
        <th>Analyst</th>
        <th >&nbsp;</th>
    </tr>
</thead>
<tbody>
    @foreach (var research in Model.Research)
    
        <tr class="clickable">
            <td>@research.Date.ToString("dd.MM.yy")</td>
            <td><strong>@research.Title</strong><br>@research.SubTitle</td>
            <td>
                @foreach (var sector in research.Sectors)
                
                    <a href="/sector/@sector.SectorId">@sector.Name</a>
                
            </td>

            <td>
                @foreach (var analyst in research.Analysts)
                
                    <a href="/analyst/@analyst.AnalystId">@analyst.Name</a><br>
                
            </td>
            <td><span class="pull-right clickable"><i class="fa fa-plus"></i></span> <i class="fa fa-file-pdf-o"></i></td>
        </tr>
        <tr class="collapse">
            <td>&nbsp;</td>
            <td colspan="4">@research.Body</td>
        </tr>
    
</tbody>
</table>

我认为唯一可能是我有一个折叠的行，如果您单击加号图标（即它将显示@research.Body），它应该会出现。 DataTables.net 似乎不喜欢使用 colspan 的行。也许吧。

我还认为明确定义我想要显示的数据可能会更好：

var researchTable = $("#research-docs").DataTable(
    "columns": [
         "data": "Date" ,
         "data": "Title" ,
         "data": "sector.Name" ,
         "data": "analyst.Name" ,
        
            "orderable": false,
            "data": null
        
    ],
    "order": [[0, 'desc']]
);

这导致了一个错误，表明我的代码（我为每个扇区检索的扇区名称）不正确：

如何让插件在页面首次加载时工作？我知道我必须连接一些 Ajax 才能稍后应用过滤。

【参考方案1】：

主要问题是DataTables 库不支持<td> 元素的rowspan 和colspan 属性。另一种解决方案是显示行详细信息，如this example 中所示。

此外，您不应在columns.data 属性中使用名称，这仅用于 AJAX 数据或服务器端处理。对于静态数据，应使用从零开始的索引。

你的初始化代码应该是：

var researchTable = $("#research-docs").DataTable(
    "columns": [
         "data": 0 ,
         "data": 1 ,
         "data": 2 ,
         "data": 3 ,
        
            "orderable": false,
            "data": 4
        
    ],
    "order": [0, 'desc']
);

或者可以简化，如果您只调整第 5 列的行为：

var researchTable = $("#research-docs").DataTable(
    "columnDefs": [
        
            "orderable": false,
            "targets": 4
        
    ],
    "order": [0, 'desc']
);

【参考方案2】：

我一直在进一步研究 DataTables.NET，我得到的第一个错误是因为：

表格的tbody中有colspan或rowspan，不是 受 DataTables 支持。

这支持了我在原始问题中提出的理论（Gyrocode.com 在他的回答中也支持了这一点）。 Allan（DataTables.NET 的作者）进一步澄清说，没有解决方法并且有“such a feature would need to be embeded into DataTables core.”

这很糟糕，因为我的代码是有效的 html。图书馆应该提供带有 colspan 的详细信息行 - 如果我是唯一一个为此苦苦挣扎的人，我会感到惊讶。

所以为了让它工作，我必须从视图中删除以下行：

<tr class="collapse">
    <td>&nbsp;</td>
    <td colspan="4">@research.Body</td>
</tr>

我不得不使用 jQuery Ajax 调用来获取我需要的“Body”字段，使用以下代码：

$('#research-docs tbody').on('click', 'td.show-body', function () 
    var tr = $(this).closest('tr');
    var row = researchTable.row(tr);
    var documentId = tr.attr('id');

    if (row.child.isShown()) 
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    
    else 
        var documentObjDTO = " 'documentId': " + documentId + "";
        var ajaxOptions = 
            type: "POST",
            url: "/GetResearchDocBody",
            contentType: "application/json; charset=UTF-8",
            dataType: "json",
            data: documentObjDTO
        ;

        $.ajax(ajaxOptions)
            .done(function (response) 
                var bodyRow = '<tr><td>&nbsp;</td><td colspan="4">' + response.Research[0].Body + '</td></tr>';
                row.child(bodyRow).show();
                tr.addClass('shown');
            );
    
);

这是Child rows (show extra / detailed information 示例的修改版本。我不喜欢这个解决方案，但这是我坚持的限制。

现在我可以继续处理问题的过滤/搜索部分了。

【参考方案3】：

看起来“sector.Name”在 DOM 中不存在。您是否尝试过删除显式列定义并像这样初始化插件：

var researchTable = $("#research-docs").DataTable(
    "order": [[0, 'desc']] );

您已经在您的模型中创建了五列，并且您正在从您的模型中填充它们，因此显式声明可能有点过头了。

【讨论】：

我已经试过了。我在一开始的问题中强调了这一点。