Child rows in DataTables using AJAX

Question

I am trying to bind a child table with a parent table. I am not able to figure out how this can be done when the data for the child table is coming through an AJAX call which then creates a dynamic table.

I have followed this

Below is my code.

$('#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...";
        }
    });
}

Have you tried just adding those new rows to the existing table? — krillgar
– krillgar, Commented May 8, 2015 at 15:23
I added some static data just to start off and it worked fine. However, I am fetching the data from database and need to use the AJAX call. I am not able to format a dynamic table using the items in the list. — user2281858
– user2281858, Commented May 8, 2015 at 15:27
Instead of returning the rows into the other function, I would add them directly to the table. — krillgar
– krillgar, Commented May 8, 2015 at 15:28
I have followed this - datatables.net/examples/api/row_details.html — user2281858
– user2281858, Commented May 8, 2015 at 15:31
Think about it this way -- what you're doing is trying to grab data at the point where you click the button. What the datatables example does is grab all the data you need for both the main table display AND the detail section. You're merely adding a div on click that has elements you've grabbed from DataTables data model. So, abandon your ajax call, return all the data you need in the initial query, and on click, you'd simply display data that's already there. — bpeterson76
– bpeterson76, Commented May 8, 2015 at 15:37

Mahmoud Farahat · Accepted Answer · 2017-04-19 16:24:09Z

8

$('#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');
    }
});

and then the format() will be

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();
        },
        ...
    });
}

demo here jsfiddle

edited Apr 19, 2017 at 16:24

Mahmoud Farahat

5,4814 gold badges46 silver badges63 bronze badges

answered May 8, 2015 at 16:19

Ja9ad335h

5,0652 gold badges23 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user2281858 Over a year ago

any fiddle for reference...?? or any link that can be an example for this..??

Ja9ad335h Over a year ago

added fiddle to answer

NightFurry Over a year ago

@JAG saw ur jsfiddle. I want to include css part in html. How to do that? (m new to web). kindly answer.

Ja9ad335h Over a year ago

u can jus add css class to table like callback($('<table class="some css class">' + html + '</table>')).show();

Konstantinos Chertouras Over a year ago

Best example for this case. Extremely useful fiddle. Many thanks.

Collectives™ on Stack Overflow

Child rows in DataTables using AJAX

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related