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

Question

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

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

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

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

我对此进行了研究，它似乎表明我的列数不正确，或者我呈现的数据与返回的列不匹配。

我的 Razor 代码：

 <table id="research-docs" class="table table-hover table-striped table-library-research">
<thead>
    <tr>
        <th>Date</th>
        <th width="250">Title</th>
        <th>Sector</th>
        <th>Analyst</th>
        <th width="70">&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 才能稍后应用过滤。

Answer 1

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

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

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

Answer 2

主要问题是 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']
});

Answer 3

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

There is a colspan or rowspan in the tbody of the table, which is not supported by 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 示例的修改版本。我不喜欢这个解决方案，但这是我一直坚持的一个限制。

现在我可以继续解决问题的 filtering/searching 部分了。

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

DataTables with colspan, Warning: Requested unknown parameter

asp.net-mvc

datatables

razor

jquery-datatables