Expandable rows on multiple tables

Dezeaz55

Hi, I'm loading multiple tables, each inside a bootstrap card. The data for the table is loaded via Ajax when the card is shown. I'm using the destroy option so the table is recreated if the card is collapsed and then re-opened.

My issue is, I'm wanting to add expandable rows. How can i target multiple tables using a single event handler? multiple tables are created in the DOM (ws-table-*), the total amount of tables can also vary.

            $('#accordion').on('shown.bs.collapse', function (e) {

                var id = (e.target.id).match(/\d+/);

               var table = $('#ws-table-' + id).DataTable({

                    "ajax": {
                        "url": "https://localhost:5001/api/v1/ws4?siteId=" + id,
                        "dataSrc": "",
                        'beforeSend': function (request) {
                            request.setRequestHeader("Authorization", 'Bearer ' + localStorage.getItem('accessToken'));
                        },
                        "statusCode": {
                            401: function (xhr, error, thrown) {
                                window.location.href = "Index.html"
                                return false
                            }
                        }
                    },
                    "language": {
                        "emptyTable": "No sites found, please add a site."
                    },
                    "destroy": true,
                    "bInfo": false,
                    "pageLength": 50,
                    "paging": false,
                    "searching": false,
                    "columnDefs": [
                        {
                            "render": function (data, type, row) {
                                return data + ', ' + row["addressLine2"] + ', ' + row["town"] + ', ' + row["postcode"];
                            },
                            "targets": 3
                        },
                        { "visible": false, "targets": [4, 5, 6] }
                    ],
                    "columns": [
                        {
                            "className": 'details-control',
                            "orderable": false,
                            "data": null,
                            "defaultContent": ''
                        },
                        { data: 'siteName' },
                        { data: 'serial' },
                        { data: 'addressLine1', title: 'Address' },
                        { data: 'addressLine2' },
                        { data: 'town' },
                        { data: 'postcode' },
                        {
                            "className": '',
                            "orderable": false,
                            "data": null,
                            "defaultContent": '<button type="button" class="btn btn-sm btn-primary mr-2 float-right editId" data-id="0"><span>Edit</span></button><button type="button" class="btn btn-sm btn-primary mr-2 float-right deleteId" data-id="0"><span>Delete</span></button>',
                            "render": function (data, type, row) {
                                return '<button type="button" class="btn btn-sm btn-primary mr-2 float-right editId" data-id="' + data.id + '"><span>Edit</span></button><button type="button" class="btn btn-sm btn-primary mr-2 float-right deleteId" data-id="' + data.id + '"><span>Delete</span></button>';
                            }
                        },
                        {
                            "className": '',
                            "orderable": false,
                            "data": null,
                            "defaultContent": '<a class="btn btn-sm btn-primary mr-2" href="http://localhost:49891/Launch.html?ws4Id=0" target="_blank"><span>Launch</span></a>',
                            "render": function (data, type, row) {
                                return '<a class="btn btn-sm btn-primary mr-2" href="http://localhost:49891/Launch.html?ws4Id=' + data.id + '" target="_blank"><span>Launch</span></a>';
                            }
                        },
                    ]
                });

            });


 $('#  ??????').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );

Thanks

kthorngren

You could do something like this:

    $('table.display').on('click', 'td.details-control', function () {
        var table = $( $(this).closest( 'table') ).DataTable();
        var tr = $(this).closest('tr');
        var row = table.row( tr );
.....

Here is an example:
http://live.datatables.net/joqopufu/1/edit

Kevin

Dezeaz55

thank you

Dezeaz55

Because i have multiple tables the line of code below causes the table to duplicate across the page

$('table.display').DataTable( { })

Dezeaz55

Is there a way i can add a class to the

<

table> element?

kthorngren

Because i have multiple tables the line of code below causes the table to duplicate across the page
$('table.display').DataTable( { })

You can initialize the Datatables the way you had before. I just did it that way as a shortcut.

Is there a way i can add a class to the
<table> element?

You can add any class you want.

The take away from the example is the part I posted above. Use a selector that will find the tables you want: $('table.display').on('click', and use $(this).closest( 'table') to find the table of the clicked row.

Kevin

Dezeaz55

Thanks, the only way i could get the selector to work is by using:

$("#accordion").on('click', 'td.details-control', function (e) { 

});

even if i specified .display after the surrounding accordion it doesn't work. The table html is generated in code using jquery. I'm not sure if that it causing an issue.

kthorngren

$('table.display')

This selector is the table tag plus the display class assigned to the table. What you use is dependent on your configuration. If you want to post a link to your page or a test case we can take a look to help.

Kevin