row().child().show() isnt picked up by jquery datatables

user_19640786 0
Viewed 51

After following the examples in https://datatables.net/reference/api/row().child(), I got this working in one project. Now im working on a new one, and everything was fine until the .show() came up with the error 'Property 'show()' does not exist on type Api' I followed the example and my imports seem to be up to date (this function has been in datatables since 1.10) so I dont know what could be wrong. This is in a typescript file, but as far as im aware everything still works like javascript. The function doesnt get upset if I do row.child().show(), but when I put the format function in it doesnt like that. Im still new to programming, so any help is super welcome :) My HTML Table:

        <table id="duckTable"  class="display" cellspacing="0" width="80%">
        <thead>
            <tr>
                <th>Select</th>
                <th>Id</th>
                <th>Name</th>
                <th>Type</th>
            </tr>
        </thead>
    </table>

My JS table:

   var duckTable = $('#duckTable').DataTable({
        "ajax": {
            "url": "/Ducks/getDucks",
            "type": "GET",
            "dataSrc":""
        },
        paging: false,
        ordering: false,
        info: false,
        "columns": [
            {
                className: 'dropdown',
                orderable: false,
                data: null,
                defaultContent: '',
            },
            { "data": "id" },
            { "data": "name"  },
            { "data": "type" }

        ],
        order: [[1, 'asc']],
        "columnDefs": [
            {

                "render": function (data, type, row) {
                    var status = row.status;
                    var editButton = "<i name=" + row.id + " class=\"open-table\" style=\"padding-left:27px; padding-top:10px;\">&#8595</i>&nbsp;&nbsp;";
                    if (status == null || status === 'D') {
                        return editButton;
                    } else {
                        return "";
                    }
                },
                "targets": 0
            },
            {"width": "10%", "targets":0},
        ]
    });

My function:

 function format(d) {
    return ('<div>Still doesnt work</div>');
}

$('#duckTable tbody').on('click', 'td.dropdown', function () {
    var tr = $(this).closest('tr');
    var row = duckTable.row(tr);

    if (row.child.isShown()) {
        // This row is already open - close it
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        // Open this row (the format() function would return the data to be shown)
        row.child(format(row.data())).show();//this throws the error
        tr.addClass('shown');
    }
});
datatables rows javascript
1 Answers

You mentioned that you're using TypeScript - the error that you're receiving sounds like a TypeScript compilation error.

This is because by the Typescript API definition that DataTables publishes, calling row.child(data) returns a union type of RowChildMethods<T> | Api<T>. Because the .show() method is not defined on the Api type, the Typescript compiler throws an error.

You should be able to get around this by splitting up your code into two statements:

row.child(format(row.data()));
row.show();
user_27689960
Related