Using more than one Datatable with Subtable(s)

dombre

Hi Forum,

my name is Dominik and I am new on datatables.net. I have read several threads on several forums, how to init multiple datatables, but at this moment I have no idea, how to init 2 maintables with minimum 1 subtable. Let me scribble the situation:

upper Page: 1 Datatable with 1 SubDatatable
bottom Page: 1 Datatable with 2 SubDatatables

The Problem follows after the Code...

This is my HTML:

<section class="content container-fluid">
    <h2>Normale Bestellungen</h2>
    <table id="maintable" class="display" style="width:100%">
        <thead>
        <tr>
            <th></th>
            <th>ID</th>
            <th>Status</th>
            <th>B-Nummer</th>
            <th>Beschreibung</th>
            <th>Bestelldatum</th>
            <th>Lieferdatum/-typ</th>
            <th>Lieferadresse</th>
            <th>Aktionen</th>
        </tr>
        </thead>
    </table>
    <h2>Sonstige Bestellungen</h2>
    <table id="maintable_orders" class="display" style="width:100%">
        <thead>
        <tr>
            <th>V</th>
            <th>D</th>
            <th>ID</th>
            <th>Datum</th>
            <th>Typ</th>
            <th>Status</th>
            <th>Produktionsnummer</th>
            <th>Werbetermin (KW)</th>
            <th>Liefertermin (KW)</th>
            <th>Notiz</th>
            <th>Aktionen</th>
        </tr>
        </thead>
    </table>
</section>

As you can see at those 3 Comments within the code, everything works except the subtable of the first maintable. The ajax-call is never been initialized, so I don´t get a needed parameter called "marketplace_order_id", thats essential for the non-working subtable.

My comments are on line 9,49 and 52 of the js-textarea.

I hope this is understandable, if I could give additional information please ask.

Thx and regards, Dominik

dombre

I need to post the js seperately:

Here´s my JS:

<script type="text/javascript">
            $(document).ready(function () {
                    function format(subtable_id) {
                        return '<div class="subgrid"><table id="' + subtable_id + '" class="display" style="width:100%"></table></div>';
                    }

                    function sub_DataTable(subtable_id) {
                        var subtable = $('#subtable_' + subtable_id).DataTable({
                            "ajax": "getmarketplacedetails?marketplace_orderitem_order_id=" + subtable_id + "&view=Druck", // This call is not initialized
                            "columns": [
                                {"data": "marketplace_orderitem_id"},
                                {...},
                                {"data": "marketplace_orderposition_actions"}
                            ],
                            "pageLength": 50,
                            "language": {
                                "url": "<?= Config::get('URL'); ?>template/bower_components/datatables.net/German.json"
                            }
                        });
                    }

                    var table = $('#maintable').DataTable({
                        "ajax": "getmarketplacedata?view=Druck",
                        "columns": [
                            {
                                "class": "details-control",
                                "orderable": false,
                                "data": null,
                                "defaultContent": "<i class=\"fas fa-plus-circle\"></i>"
                            },
                            {"data": "marketplace_order_id"},
                            {..."},
                            {"data": "marketplace_order_actions"}
                        ],
                        "pageLength": 20,
                        "language": {
                            "url": "<?= Config::get('URL'); ?>template/bower_components/datatables.net/German.json"
                        }
                    });

                    $('#maintable tbody').on('click', 'tr 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 {
                            var subtable_id = row.data()['marketplace_order_id']; //Uncaught TypeError: Cannot read property 'marketplace_order_id' of undefined
                            row.child(format("subtable_" + subtable_id)).show();
                            tr.addClass('shown');
                            sub_DataTable(subtable_id); // Init here
                        }
                    });

                    function printformat(subtable_id_print, subtable_type_print) {
                            return '<div class="subgrid"><table id="print_' + subtable_id_print + '" class="display" style="width:100%"><thead><tr><th>Pos-ID</th><th>Adressat</th><th>Datum</th><th>Schilder 190</th><th>Streifen 110</th><th>Aktionen</th></tr></table></div>';
                    }

                    function sub_DataTablePrint(table_id_print, subtable_type_print) {
                            var subtable = $('#print_subtable_' + table_id_print).DataTable({
                                "ajax": "getorderdetails?orderitem_order_id=" + table_id_print + "&view=Druck",
                                "columns": [
                                    {"data": "orderitem_id"},
                                    {...},
                                    {"data": "orderitem_actions"}
                                ],
                                "pageLength": 50,
                                "language": {
                                    "url": "<?= Config::get('URL'); ?>template/bower_components/datatables.net/German.json"
                                }
                            });
                    }

                    function additionalorderitemformat(order_id) {
                        var string = '<div class="subgrid">...</div>';

                        return string;
                    }

                    // DataTable
                    var table = $("#maintable_orders").DataTable({
                        "processing": true,
                        "serverSide": true,
                        "ajax": "getorderdata?view=Druck",
                        "columns": [
                            {
                                "class": "details-control",
                                "orderable": false,
                                "data": null,
                                "defaultContent": "<i class=\"fas fa-plus-circle\"></i>"
                            },
                            {
                                "class": "data-control",
                                "orderable": false,
                                "data": null,
                                "defaultContent": "<i class=\"fas fa-align-justify\"></i>"
                            },
                            {"data": "order_id"},
                            {...},
                            {"data": "order_actions"}
                        ],
                        "pageLength": 20,
                        "language": {
                            "url": "<?= Config::get('URL'); ?>template/bower_components/datatables.net/German.json"
                        },
                        "dom": '<"toolbar">frtip'
                    });


                    $('#maintable_orders tbody').on('click', 'tr 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 {
                            var subtable_id_print = row.data()['order_id'];
                            var subtable_type_print = row.data()['order_type'];
                            row.child(printformat("subtable_" + subtable_id_print, subtable_type_print)).show();
                            tr.addClass('shown');
                            sub_DataTablePrint(subtable_id_print, subtable_type_print);
                        }
                    });

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

                        if (row.child.isShown()) {
                            row.child.hide();
                            tr.removeClass('shown');
                        } else {
                            var order_id = row.data()['order_id'];
                            row.child(additionalorderitemformat(order_id)).show();

                            $.ajax({
                                url: 'getadditionalfileitems?order_id=' + order_id,
                                type: 'post',
                                dataType: 'json',
                                success: function (data) {
                                    $.each(data, function (k, v) {
                                        $("table#additionalFileitemOrder_" + order_id + " > tbody:last-child").append("<tr><td>" + v.filedata_id + "</td><td>" + v.filedata_number + "</td><td>" + v.filedata_description + "</td><td>" + v.filedata_size + "</td><td>" + v.filedata_color + "</td><td>" + (v.filedata_price).toString().replace(".", ",") + "</td><td><i class='fas fa-save' onclick='downloadFileitem(\"" + v.filedata_file + "\")'></i></td></tr>");
                                    });
                                },
                                error: function () {
                                    console.log('error');
                                }
                            });

                            $.ajax({
                                url: 'getadditionalcostorderitems?order_id=' + order_id,
                                type: 'post',
                                dataType: 'json',
                                success: function (data) {
                                    $.each(data, function (k, v) {
                                        $("table#additionalCostOrderitemOrder_" + order_id + " > tbody:last-child").append("<tr><td>" + v.additional_cost_orderitem_id + "</td><td>" + v.additional_cost_orderitem_amount + "</td><td>" + v.additional_cost_name + "</td><td>" + (v.additional_cost_price).toString().replace(".", ",") + "</td><td>" + (v.additional_cost_price * v.additional_cost_orderitem_amount).toFixed(2).toString().replace(".", ",") + "</td><td>&nbsp;</td></tr>");
                                    });
                                },
                                error: function () {
                                    console.log('error');
                                }
                            });

                            tr.addClass('shown');
                        }
                    });
                }
            );
        </script>

kthorngren

I'm guessing the problem is due to this error you are getting?
var subtable_id = row.data()['marketplace_order_id']; //Uncaught TypeError: Cannot read property 'marketplace_order_id' of undefined

I think the problem is you are using the variable table for both tables:
var table = $('#maintable').DataTable({

and
var table = $("#maintable_orders").DataTable({

I need to use different variables.

Kevin

dombre

Hi Kevin,

you´ re absolutely right - That saved my day. Tanks very much.

regards
Dominik