Question

我遇到未捕获的TypeError：尝试在DataTable中显示子行时，无法读取未定义的属性'show'。我有显示的图像，但是当我单击时出现错误。

https://datatables.net/examples/api/row_details.html

我已经在他们的网站上查看了该指南，但似乎无法破解。还有其他人遇到过同样的问题吗？

注意-为了安全起见，我已经在ajax中重命名了字段和URL。请在下面查看我的代码。

jQuery(document).ready(function () {
jQuery.ajax({
    url: "URL Goes here",
    method: "POST",
    data: '{"Id":"' + id + '", "Title": "' + title + '", "Manager": "' + manager + '", "StartDate": "' + startDate + '", "Status": "' + status + '", "Applications": "' + applications + '"}',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        console.log(data);
        var table = jQuery('#MyData').DataTable({
            data: data.d,
            retrieve: true,
            responsive: true,
            columns:
                [
                    {
                        "class": 'details-control',
                        "orderable": false,
                        "data": null,
                        "defaultContent": ''
                    },
                    {
                        "data": "ID",
                        "render": function (data, type, full, meta) {
                            return '<a target=_blank href="https://www.google.com' + data + '">' + data + '</a>';
                        }
                    },
                    { "data": "Name" },
                    { "data": "Manager" },
                    { "data": "StartDate" },
                    { "data": "Status" },
                    { "data": "Applications" }
                ],
            order: [[6, "desc"]]
        });
        // Add event listener for opening and closing details
        jQuery('#MyData').on('click', 'td.details-control', function () {
            var tr = jQuery(this).closest('tr');
            var row = table.row(tr);

            if (row.child.isShown()) {
                // This row is already open - close it
                jQuery('div.slider', row.child()).slideUp(function () {
                    row.child.hide();
                    tr.removeClass('shown');
                });
            }
            else {
                // Open this row
                jQuery('div.slider', row.child()).slideDown;
                row.child(format(row.data())).show();
                tr.addClass('shown');
            }
        });
    }
});

function format(d) {
    // `d` is the original data object for the row
    return
    '<div class="slider" name>' +
        '<table>' +
        '<tr>' +
        '<td>ID:</td>' +
        '<td>' + d.Id + '</td>' +
        '</tr>' +
        '<tr>' +
        '<td>Applications:</td>' +
        '<td>' + d.Applications + '</td>' +
        '</tr>' +
        '</table>' +
        '</div>'
}
 });

Answer 1

您正在使用响应式扩展以及子行功能。 According to Allan Jardine是jQuery DataTables的创建者，由于自适应扩展使用子行API，因此无法同时使用这两种功能。

请参阅feature compatibility chart，并请参阅有关响应式和子行功能的说明。

如果您只想始终在子行中显示某些列，则可以删除format()函数，单击处理程序，然后将special class none应用于元素的th您想在子行中显示的列。

此外，如果您想在其自己的列上显示子行控件，请参见this example。

DataTables子行-未捕获的TypeError：无法读取未定义的属性“ show”

1 个答案: