Trigger for details-control does not work in mobile view, will not open details row

asle

Here is the page with the problem:

I have <i> tag for the trigger. When I click the <tr> the row opens and collapses. I tried to change the code to click on the <i> tag and it works until it resizes to mobile view. Try to click on the plus sign and resize the page to smallest width. Then the TR click still works but not clicking on the plus sign.

       $('#example').on('click', 'tr', 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.find('i.plus').removeClass('fa-minus-circle').addClass('fa-plus-circle');    // FontAwesome 5
        }
        else {
            // Open this row
            row.child( formatP(row.data()) ).show();
           // row.child.show();
          tr.find('i.plus').removeClass('fa-plus-circle').addClass('fa-minus-circle'); // FontAwesome 5
        } 

allan

$('#example').on('click', 'tr', function () { 

Should be:

$('#example').on('click', 'tbody td.details-control i', function () { 

if you want it to just activate on the icon element.

Allan

asle

Hi allan, I tried this also but it still fails on mobile view. Try on my page to make the page mobile width and you will notice that nothing happens when clicking on the trigger. The <i> tag is inside the <tr> tag so to have click on <tr> should make no difference where you click. On this page I have the trigger on the <tr> element. Notice that when the page is mobile width one can still click on the <tr> but clicking on the <i> element does nothing. Is there something strange with my <i> tag or content?

colin

If you add the click code in on the console, it's working there, so I believe it's an issue with the asynchronous Ajax loading. Could you please try changing

$('#example').on('click', 'tbody td.details-control i', function () { 

to

$('#example tbody').on('click', 'td.details-control i', function () { 

and see if that resolves. If not, please try moving the click code into initComplete,

Colin

asle

Thanks for helping out. But this still does not work. I tried to change the code and it works like before but when I resize down to mobile width, the "+" sign changes to "-" but the detail row does not open. Clicking again on the "-" does nothing (in mobile width). So some progress, the "+" changes to "-"! Is there something wrong with my code after the click event?

The function:

        function showdetail() {
            $('#example tbody').on('click', 'td.details-control i', 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.find('i.plus').removeClass('fa-minus-circle').addClass('fa-plus-circle'); 
            }
            else {
                // Open this row
                row.child( format(row.data()) ).show();
              tr.find('i.plus').removeClass('fa-plus-circle').addClass('fa-minus-circle'); 
            }
        } ); 
    } 

I added the function to the code initComplete option like this (fires the function but does not expand the detail row):

    var table = $('#example').DataTable( {
            "initComplete": function( settings, json ) {
            showdetail();
      },

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

asle

Forgot to mention that now in mobile width the "+" icon changes to "-" on click but does not change back to "+" on next click.

allan

Oh! You've got Responsive on the table which is using the child rows for display of the hidden content. But you are also attempting to use the same element as Responsive does, to control the child row display.

So there are two listeners on the same element controlling the same child row, which is why the wheels appear to come off. It does flash open and then immediately closed again.

So the question is - do you want Responsive to have a child row for the hidden columns or not? If you do, and you need the details display as well, you'd need to move the details display control button into its own column.

Allan

asle

Thanks but I am a bit lost. I have looked at the examples for detail rows and they seem to work fine in mobile width (responsive). The only difference is I am using a <i> tag. I thought my trigger already was in the details display column. The trigger is inside the details-control <td>.

asle

And yes I want Responsive and details row also on mobile view.

colin

If you look at the compatibility table, if you are using child rows, Responsive needs to use a modal display. As Allan said, child rows and Responsive use the same underlying principles, so can't be used together in their default states,

Colin

asle

I am trying to understand! Strange thing (?) is that when I set the trigger on the TR tag it still expands the detail row. But then that is TR and not <i> tag. Does this mean I can not use an <i> tag for the trigger while still using Responsive on the table?

kthorngren

You can use the ii tag to show the child rows if you wish. The problem is that you also are using the default Responsive configuration which instantiates a click event handler in the first column - the same as your i. Both Responsive and Child Row Details are using the same tr element to show the data. Clicking the -i to show the Child Row Details also invokes the Responsive click handler. They conflict because they both are using the same tr element to show the child data.

You will need to use different columns for Responsive and Child Row Details. You can move the details-control column (Child Row Details) or you can move the Responsive column as shown in this example.

As documented in the Compatibility Matrix you will need to show the Responsive details in a Modal hen using Child Row Details.

See this example.

Kevin