DataTables 中的 Child 行使用 AJAX

Question

我正在尝试将 child table 与 parent table 绑定。当 child table 的数据通过 AJAX 调用然后创建动态 table.

我关注了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...";
        }
    });
}

Answer 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

DataTables 中的 Child 行使用 AJAX

Child rows in DataTables using AJAX

javascript

ajax

jquery

datatables