无法在 jQuery Datatable 中列出详细信息数据

Posted 2023-05-09

【中文标题】无法在 jQuery Datatable 中列出详细信息数据

【英文标题】：Cannot list details data in jQuery Datatable

【发布时间】：2017-02-21 06:16:48

【问题描述】：

我在我的 ASP.NET MVC 项目中遵循了jQuery Datatable - Sliding child rows 示例（只需查看该页面上的“完整代码”部分），我可以正确列出主数据和静态详细信息数据。但是，当我想通过 AJAX 动态检索详细信息数据时，由于 TypeError: table.fnOpen is not a function 错误，我无法正确列出它们。有一个解决方案将 DataTable 更改为 dataTable，但在这种情况下我遇到了另一个错误。问题出在 click & format 方法上，我认为我在某些定义上犯了错误。你能看看并澄清错误在哪里吗？提前谢谢...

function format(d) 
    return '<div class="slider">' +
    '<table style="width:100%">' +
      '<tr>' +
            '<th>Name</th>' +
            '<th>Surname</th> ' +
            '<th>Number</th>' +
        '</tr>' +
        '<tr>' +
            '<td>' + d.StudentName + '</td>' +
            '<td>' + d.StudentSurname + '</td> ' +
            '<td>' + d.StudentNumber + '</td>' +
        '</tr>' +
    '</table>'
    '</div>';



$(document).ready(function () 

    var table;
    table = $('#dtbLabGroup')
        .DataTable(

        //code omitted for brevity

        "columns": [
                    
                        "class": 'details-control',
                        "orderable": false,
                        "data": null,
                        "defaultContent": ''
                    ,
                     "name": "Lab" ,
                     "name": "Schedule" ,
                     "name": "Term" ,
                     "name": "Status" 
        ],          
        "order": [[1, 'asc']],
    );


    // Add event listener for opening and closing details
    $('#dtbLabGroup tbody').on('click', 'td.details-control', function () 

        // !!! There might be a problem regarding to these 3 parameters
        var tr = $(this).closest('tr');
        var row = table.row(tr);            
        var nTr = $(this).parents('tr')[0];
        //

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

            $('div.slider', row.child()).slideDown();

            // !!! There is PROBABLY a problem
            // !!! I added the following code for retrieving data via AJAX call. 
            var id = 8; //used static id for testing
            $.get("GetStudents?id=" + id, function (students) 
                table.fnOpen(nTr, students, 'details');
            );
        
    ); 

); 

更新一：下面是修改后的format()方法：

function format(d) 
    var htmlResult = '<div class="slider">' +
    '<table style="width:100%">' +
      '<tr>' +
            '<th>Name</th>' +
            '<th>Surname</th> ' +
            '<th>Number</th>' +
        '</tr>';

       $.each(d, function (i, d) 
           htmlResult += '<tr><td>' + d[i].StudentName + '</td><td>' + d[i].StudentSurname + '</td><td>' + d[i].StudentNumber + '</td></tr>';
       );

    htmlResult += '</table>' +
    '</div>';
    return htmlResult;

【问题讨论】：

fnOpen 是 v1.9 语法，这就是为什么将 Datatables 更改为 datatables 是一种解决方案。您链接到的示例根本不使用fnOpen - 所以我想知道您为什么使用它？见here

因为我必须使用 AJAX 调用来加载数据，并且在我找到的示例中有 fnOpen 方法。没有 fnOpen 有更好的例子吗？谢谢...

您是否尝试使用 fnOpen 添加新行？

不，我使用 v1.10，我知道我不应该使用 fnOpen。唯一认为我需要从 // 打开此行 部分调用的 format(row.child); 方法（具有 AJAX 调用）。请问有什么用法示例吗？非常感谢...

我还是不明白你想用fnOpen 做什么...

【参考方案1】：

您需要在子行中显示加载指示器，通过 Ajax 检索内容并将其注入子行替换加载指示器。

例如：

// ... skipped ...

// Open this row
row.child('<p><center>Loading...</center></p>', 'no-padding' ).show();
tr.addClass('shown');
$('div.slider', row.child()).slideDown();

$.getJSON("GetStudents?id=" + id, function(data)
   $('td', row.child()).html(format(data));
   $('div.slider', row.child()).show();
);

// ... skipped ...

有关代码和演示，请参阅this example。

【讨论】：

感谢您的回复。实际上我在加载子数据时遇到了冻结问题。子记录行是否导致此冻结？如果是这样，我是否必须使用“加载指示器”？另一方面，在AJAX调用中使用异步会更好吗？

@ClintEastwood，Ajax 请求默认是异步的，这就是为什么需要加载指示器 (Loading...)。同步请求可能会暂时锁定浏览器，从而在请求处于活动状态时禁用任何操作。

只是一个小问题导致加载指示器永远循环。我在我的问题中添加了格式代码。您能否看一下并说明如何为多个子记录正确创建循环？

@ClintEastwood，您更新的代码中存在语法错误，而不是 '</tr>' + 应该是 '</tr>';。检查控制台是否有错误。

谢谢，但问题与获取数组中的数据参数有关，除此之外没有错误。请小看tr错误，看看如何循环获取记录值？