Question

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

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

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

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

Error

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

我的剃刀代码：

 <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']]
});

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

Datatables.net error JSON not correct

如何在首次加载页面时让插件正常工作？我知道我将不得不连接一些Ajax以便稍后应用过滤。

Answer 1

主要问题是DataTables库不支持rowspan元素的colspan和<td>属性。替代解决方案是显示行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 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示例的修改版本。我不喜欢这个解决方案，但这是我坚持的限制。

现在我可以继续讨论问题的过滤/搜索部分。

Answer 3

看起来像＆＃34; sector.Name＆＃34;在DOM中不存在。您是否尝试删除显式列定义并仅将插件初始化为：

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

您已经在自己的列中创建了五个列，并且您已经从模型中填充了所有列，因此明确的声明可能会过度。

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

3 个答案: