Parent-Child linked tables.

Riddley_Walker

New to datatables, so I apologize for my ignorance, but I really have tried before asking. I have spent the last 20 hours or so trying to work through the Parent-Child blog post (https://datatables.net/blog/2016-03-25). I can't get it to work. I can put two tables on the same table and they work fine (independently), but no matter what I do it breaks - I think when I get to the section labeled Child Table and beyond. The working version can be found here: http://74.124.214.194/~themoviechef/TwoTables.html. (Also, and I'm not sure about this because it isn't mentioned in the article, but in the non-working code there are references to columns instead of fields. )

The .js file for the code that seems to work above is

/*
 * Editor client script for DB table sites
 * Created by http://editor.datatables.net/generator
 */

(function($){

$(document).ready(function() {
    var editor = new $.fn.dataTable.Editor( {
        ajax: 'php/table.sites.php',
        table: '#sites',
        fields: [
            {
                "label": "name:",
                "name": "name"
            }
        ]
    } );

    var table = $('#sites').DataTable( {
        ajax: 'php/table.sites.php',
        columns: [
            {
                "data": "name"
            }
        ],
        select: {
            style: 'single'
        },
        lengthChange: false
    } );

    new $.fn.dataTable.Buttons( table, [
        { extend: "create", editor: editor },
        { extend: "edit",   editor: editor },
        { extend: "remove", editor: editor }
    ] );

    table.buttons().container()
        .appendTo( $('.col-md-6:eq(0)', table.table().container() ) );





    var editor = new $.fn.dataTable.Editor( {
        ajax: 'php/table.users.php',
        table: '#users',
        fields: [
            {
                "label": "name:",
                "name": "first_name"
            }
        ]
    } );

    var table = $('#users').DataTable( {
        ajax: 'php/table.users.php',
        columns: [
            {
                "data": "first_name"
            }
        ],
        select: true,
        lengthChange: false
    } );

    new $.fn.dataTable.Buttons( table, [
        { extend: "create", editor: editor },
        { extend: "edit",   editor: editor },
        { extend: "remove", editor: editor }
    ] );

    table.buttons().container()
        .appendTo( $('.col-md-6:eq(0)', table.table().container() ) );
} );

}(jQuery));

When I modify per my reading of the instructions in the blog it fails. No error, but the first table doesn't populate and the second doesn't show up at all. This is the code I am trying in table.site.js:

var siteEditor = new $.fn.dataTable.Editor( {
    ajax: 'php/sites.php',
    table: '#sites',
    fields: [ {
        label: 'Site name:',
        name: 'name'
    } ]
} );

var siteTable = $('#sites').DataTable( {
    dom: 'Bfrtip',
    ajax: '../php/sites.php',
    columns: [
        { data: 'name' },
        { data: 'users', render: function ( data ) {
            return data.length;
        } }
    ],
    select: {
        style: 'single'
    },
    buttons: [
        { extend: 'create', editor: siteEditor },
        { extend: 'edit',   editor: siteEditor },
        { extend: 'remove', editor: siteEditor }
    ]
} );

var usersEditor = new $.fn.dataTable.Editor( {
    ajax: {
        url: '../php/users.php',
        data: function ( d ) {
            var selected = siteTable.row( { selected: true } );
 
            if ( selected.any() ) {
                d.site = selected.data().id;
            }
        }
    },
    table: '#users',
    fields: [
            {
                "label": "First Name:",
                "name": "first_name"
            },
            {
                "label": "Last Name:",
                "name": "last_name"
            },
            {
                "label": "Phone:",
                "name": "phone"
            }
        ]
} );

var usersTable = $('#users').DataTable( {
    dom: 'Bfrtip',
    ajax: {
        url: '../php/users.php',
        type: 'post',
        data: function ( d ) {
            var selected = siteTable.row( { selected: true } );
 
            if ( selected.any() ) {
                d.site = selected.data().id;
            }
        }
    },
    columns: [
        { data: 'users.first_name' },
        { data: 'users.last_name' },
        { data: 'users.phone' }
    ],
    select: true,
    buttons: [
        { extend: 'create', editor: usersEditor },
        { extend: 'edit',   editor: usersEditor },
        { extend: 'remove', editor: usersEditor }
    ]
} );

siteTable.on( 'select', function () {
    usersTable.ajax.reload();
 
    usersEditor
        .field( 'users.site' )
        .def( siteTable.row( { selected: true } ).data().id );
} );
 
siteTable.on( 'deselect', function () {
    usersTable.ajax.reload();
} );


siteEditor.on( 'submitSuccess', function () {
    usersTable.ajax.reload();
} );
 
usersEditor.on( 'submitSuccess', function () {
    siteTable.ajax.reload();
} );

Any help would be appreciated.

allan

Think this is the same as this thread caused by the confusion with our spam filter.

Allan

kthorngren

first table doesn't populate

Looks like you are using two different URLs. This is the first working config:

    var table = $('#sites').DataTable( {
        ajax: 'php/table.sites.php',

And the non-working:

var siteTable = $('#sites').DataTable( {
    dom: 'Bfrtip',
    ajax: '../php/sites.php',

the second doesn't show up at all

Are you saying the table doesn't appear on the page?

Have you looked at the browser's console for errors?

Looks like you have a different path for the AJAX URL for this table too.

Kevin