使用 AJAX 的 DataTables 中的子行

Posted 2023-05-08

【中文标题】使用 AJAX 的 DataTables 中的子行

【英文标题】：Child rows in DataTables using AJAX

【发布时间】：2015-07-19 13:46:01

【问题描述】：

我正在尝试将子表与父表绑定。当子表的数据通过 AJAX 调用来创建动态表时，我无法弄清楚如何做到这一点。

我已关注this

下面是我的代码。

$('#myTable tbody).on('click', 'td.details-control', function () 

        var tr = $(this).closest('tr');
        var row = $('#myTable').DataTable().row(tr);

        if (row.child.isShown()) 
            // This row is already open - close it

            row.child.hide();
            tr.removeClass('shown');
        
        else 
            // Open this row

            row.child(format()).show();
            tr.addClass('shown');
        
    );

function format() 

    $.ajax(
        type: 'GET',
        url: '@Url.Action("MyFunction", "Home")',
        data:  "Id": MyId ,
        dataType: "json",
        async: false,
        success: function (data) 
            var list = data;
            $.each(list, function (index, item) 

                return '<table>.......<table />';

                //i need to loop across the list and create a dynamic table with tr and td


            );
        ,
        error: function (result) 
            var error = JSON.stringify(result);
            throw "Error...";
        
    );

【问题讨论】：

您是否尝试将这些新行添加到现有表中？

我添加了一些静态数据只是为了开始，它工作正常。但是，我正在从数据库中获取数据并且需要使用 AJAX 调用。我无法使用列表中的项目格式化dynamic table。

我不会将行返回到另一个函数中，而是直接将它们添加到表中。

我已经关注了这个 - datatables.net/examples/api/row_details.html

这样想——你正在做的是试图在你点击按钮的地方抓取数据。数据表示例所做的是获取主表显示和详细信息部分所需的所有数据。您只是在单击时添加一个 div，其中包含您从 DataTables 数据模型中获取的元素。因此，放弃您的 ajax 调用，在初始查询中返回您需要的所有数据，然后单击，您只需显示已经存在的数据。

【参考方案1】：

$('#myTable tbody').on('click', 'td.details-control', function () 

    var tr = $(this).closest('tr');
    var row = $('#myTable').DataTable().row(tr);

    if (row.child.isShown()) 
        // This row is already open - close it

        row.child.hide();
        tr.removeClass('shown');
    
    else 
        format(row.child);  // create new if not exist
        tr.addClass('shown');
    
);

然后format() 将是

function format(callback) 
    $.ajax(
        .... 
        //async: false, you can use async 
        success: function (data) 
            var list = data;
            var html = '';
            $.each(list, function (index, item) 
                ...
                //create <tr> <td> with loop
                html= '<tr><td>.......</tr>';
            );
            callback($('<table>' + html + '</table>')).show();
        ,
        ...
    );

在这里演示jsfiddle

【讨论】：

任何小提琴供参考...？？或任何可以作为示例的链接..??

添加小提琴来回答

@JAG 看到了你的 jsfiddle。我想在 html 中包含 css 部分。怎么做？ （我是网络新手）。请回答。

你可以像callback($('<table class="some css class">' + html + '</table>')).show();一样将css类添加到表中

本案例的最佳示例。非常有用的小提琴。非常感谢。