Using more than one Datatable with Subtable(s)

dombre · January 2019

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 · January 2019

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 · January 2019

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 · January 2019

Hi Kevin,

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

regards
Dominik

Using more than one Datatable with Subtable(s)

Using more than one Datatable with Subtable(s)

Replies

Howdy, Stranger!

Categories

DataTables

Using more than one Datatable with Subtable(s)

Using more than one Datatable with Subtable(s)

Replies

Howdy, Stranger!

Quick Links

Categories

DataTables