Load child rows from external data source in HTML

broadview

Hi

I have followed the example here: https://datatables.net/examples/api/row_details.html

What i would like to do is when the child rows are loaded, get them from an external source.

Ive searched the web and have confused myself with this.

Any help would be much appreciated.

here is my code:

Pete

```function format ( d ) {
return d.childrow;
}

$(document).ready(function() {
var table = $('#example').DataTable( {
"Dom": "fWlrtip",
"scrollY": "500px",
"scrollCollapse": true,
"paging": false,
"ajax": "../functions/company_assetregister_ajax.php",
"columns": [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "assetid" },
{ "data": "assetname" },
{ "data": "serialnumber" },
{ "data": "location" },
{ "data": "intlocation" },
{ "data": "pateligable" },
{ "data": "pattestduedate" },
],
"order": [[1, 'asc']]
} );

$('#example tbody').on('click', 'td.details-control', function () {
    var tr = $(this).closest('tr');
    var row = table.row( tr );

    if ( row.child.isShown() ) {
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        row.child( format(row.data()) ).show();
        tr.addClass('shown');
    }
} );

} );```

jLinux

Ive done this, i can show you. But can you first properly format the code? Use the markdown thats at the borrom of the reply input

broadview

Hi, apologies

function format ( d ) {
    return d.childrow;
}

$(document).ready(function() {
    var table = $('#example').DataTable( {
        "Dom": "fWlrtip",
        "scrollY":        "500px",
        "scrollCollapse": true,
        "paging":         false,
        "ajax": "../functions/company_assetregister_ajax.php",
        "columns": [
            {
                "className":      'details-control',     
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "assetid" },
            { "data": "assetname" },
            { "data": "serialnumber" },
            { "data": "location" },
            { "data": "intlocation" },
            { "data": "pateligable" },
            { "data": "pattestduedate" },
       ],
        "order": [[1, 'asc']]
    } );
    
    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );
} );

jLinux

All you really need to do, is add an ajax request into the format() function, or even better, throw it into the else statement of the $('#example tbody').on('click', 'td.details-control', then have the success of the ajax execute the row.child( format(row.data()) ).show();

broadview

hi

Thanks for your help, Can you give me an example of that?

Will it be ok with an HTML response?

jLinux

You want the HTML in the response to be the exact content of the child row?

If so, this should suffice

$(document).ready(function() {
    var table = $('#example').DataTable( {
        "Dom": "fWlrtip",
        "scrollY":        "500px",
        "scrollCollapse": true,
        "paging":         false,
        "ajax": "../functions/company_assetregister_ajax.php",
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "assetid" },
            { "data": "assetname" },
            { "data": "serialnumber" },
            { "data": "location" },
            { "data": "intlocation" },
            { "data": "pateligable" },
            { "data": "pattestduedate" },
        ],
        "order": [[1, 'asc']]
    } );

    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );

        if ( row.child.isShown() ) {
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            $.ajax({
                type: 'GET',
                url: "/url/here/",
                success: function (response) {
                    row.child( response ).show();
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    row.child( 'Error loading content: ' + thrownError ).show();
                }
            });
            tr.addClass('shown');
        }
    } );
} );

Just make sure you change the url: "/url/here/" to the proper URL

broadview

Thank you so much for that. How do I pass the assetid field along with the ajax request to get the child rows. So it would send the get request as /url/here.php?assetid=000001

jLinux

I believe this would work..

$(document).ready(function() {
    var table = $('#example').DataTable( {
        "Dom": "fWlrtip",
        "scrollY":        "500px",
        "scrollCollapse": true,
        "paging":         false,
        "ajax": "../functions/company_assetregister_ajax.php",
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { 
                "data": "assetid",
                "name": "assetid"
            },
            { 
                "data": "assetname",
                "name": "assetname" 
            },
            { 
                "data": "serialnumber",
                "name": "serialnumber" 
            },
            { 
                "data": "location",
                "name": "location" 
            },
            { 
                "data": "intlocation",
                "name": "intlocation" 
            },
            { 
                "data": "pateligable",
                "name": "pateligable" 
            },
            { 
                "data": "pattestduedate",
                "name": "pattestduedate" 
            }
        ],
        "order": [[1, 'asc']]
    } );

    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );

        if ( row.child.isShown() ) {
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            $.ajax({
                type: 'GET',
                data: {
                    assetid: row.data().assetid
                }
                url: "/url/here/",
                success: function (response) {
                    row.child( response ).show();
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    row.child( 'Error loading content: ' + thrownError ).show();
                }
            });
            tr.addClass('shown');
        }
    } );
} );

As you can see, I used the columns.name for each column, then in the data for the ajax, I referenced the assetid value from the row.

This wasnt tested, but I believe it should work just fine

broadview

Hi

Thanks for that, on your secdond example, this doesnt load. it crashes the whole datatable.
The first one works just fine. any ideas?

Pete

broadview

Hi

I took some of your code and ammended it.

This works just fine.

$(document).ready(function() {
    var table = $('#example').DataTable( {
        "Dom": "fWlrtip",
        "scrollY":        "500px",
        "scrollCollapse": true,
        "paging":         false,
        "ajax": "../functions/company_assetregister_ajax.php",
        "columns": [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { "data": "assetid" },
            { "data": "assetname" },
            { "data": "serialnumber" },
            { "data": "location" },
            { "data": "intlocation" },
            { "data": "pateligable" },
            { "data": "pattestduedate" },
        ],
        "order": [[1, 'asc']]
    } );
 
    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            $.ajax({
                type: 'GET',
                data: {
                    assetid: row.data().assetid
                },
                url: "../ajax/path.php",
                
                success: function (response) {
                    row.child( response ).show();
                },
                error: function (xhr, ajaxOptions, thrownError) {
                    row.child( 'Error loading content: ' + thrownError ).show();
                }
            });
            tr.addClass('shown');
        }
    } );
} );