Add nested tables to row as child row and search the table as well as child rows

DolanTheMFMSWizard

I can't seem to get nested tables rowing as the row's childs.

$('tbody').on('click', 'span', function () {
                var tr = $(this).closest('tr');
                var tableApi = "";
                var Json = ""

                if ($(this).closest('table').attr("id") === 'upgrade-cards-table') {
                    tableApi = upgradeTable;
                    Json = upgradeCardsJson;
                } else if ($(this).closest('table').attr("id") === 'non-upgrade-cards-table') {
                    tableApi = nonUpgradeTable;
                    Json = nonUpgradeCardsJson;
                }

                var row = tableApi.row(tr);

                if (row.child.isShown()) {
                    $(this).attr("class", "glyphicon glyphicon-chevron-right");
                    row.child.hide();
                } else {
                    if (row.child() === undefined) {
                        var key = this.id;
                        var cardDictionary = (Json[key])["CardsDictionary"];
                        var table = $(row.child()).DataTable({
                            "paging": false,
                            "searching": false,
                            "info": false,
                        });
                        
                        var table = row.child(format()).show();
                        jQuery.each(cardDictionary, function (i, value) {
                            var cardDefinition = value["CardDefinition"];
                            console.log([cardDefinition["DisplayName"], value["Name"], cardDefinition["RarityId"], value["OwnedCount"]]);
                            table.row.add([cardDefinition["DisplayName"], value["Name"], cardDefinition["RarityId"], value["OwnedCount"]]).draw();
                        });
                    } else {
                        row.child.show();
                    }
                    $(this).attr("class", "glyphicon glyphicon-chevron-down");
                }
            });

        // Child Table Generator()
        function format() {
            return $('<table><thead><tr><td>Name<td><td>Id</td><td>Rarity</td><td>Owned</td></tr></thead></table>').toArray();
        }

I have this code. So the user clicks a row and that row is used as a key to look up what the values for the child table should be and it generates the table. Currently this code just shows the column headers and that's it.

kthorngren

Looks like you are close. I'm not sure that row.child() will return a valid jQuery selector for $(row.child()).DataTable(. You will want to use something else for the table ID such as the row index or a unique data element.

You will want to add this id to the table tag in your format function.

You will want to build the child table before trying to init the child Datatable. varrow.child(format()).show();should come beforevar table = $(row.child()).DataTable({`

This example may help:
http://live.datatables.net/gohefoki/1/edit

Kevin