child-row expand button in responsivePriority

OscarC

I have a table that works well. It is fairly simple.
It gets defined with this:

$.extend( $.fn.dataTable.defaults, {
    responsive: true
} );  
    var table = $('#example').DataTable( {
        dom: "Bfrtip",
        ajax: "somefile.php",
        columns: [
            { data: "FirstName" },
            { data: "LastName"},
            { data: "LevelofAccess"}
        ],
        select: true,
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ],
        columnDefs:[
            { targets: [2],
              createdCell: function (td, cellData, rowData, row, col) {
                if ( cellData == 'Not assigned' ) {
                  $(td).css('color', 'red');
                }
              }
            }
        ]
    } );

Everything works fine.
But I want it to behave such that when it is in a small screen, and there is room only for one column, the one that shows is the second column (1 in the array).
I tried { responsivePriority: 1, targets: 1 } in columns[] and also in columnDefs[]
It works in both.
The problem is that the child-row expand button does not display anymore. If I get the responsivePriority parameter, the button is back.

Any ideas of what the issue might be?

colin

Hi @OscarC ,

This sounds like the same issue as discussed in this thread.

Cheers,

Colin

OscarC

@colin, thank you very much for your response.
I also found this thread, which hits much closer to home. You are on it.
You are suggesting to use this example.
I tried it using the code above and does not work well.
The click in the arrow does not work.
http://live.datatables.net/bopeneno/1/edit?html,css,js,console,output.
Any suggestions?

kthorngren

Seems to be broken in the nightly version. I used the Download Builder to get the latest versions and its working.
http://live.datatables.net/ruqamuso/1/edit

Kevin

OscarC

Thank you @kthorngren. I think that you are right.
Here is a final comment: I am using Responsive 2.2.1 and I don't want to upgrade right now.
I found a way of make it work

    var table = $('#example').DataTable( {
        responsive:true,
        dom: "Bfrtip",
        ajax: "https://myfilet.php",
        columns: [
        null,
            { data: "FirstName" },
            { data: "LastName"},
            { data: "LevelofAccess"}
        ],
        select: true,
        buttons: [
            'copy', 'csv', 'excel', 'pdf', 'print'
        ],
        columnDefs:[
            { targets: [3],
              createdCell: function (td, cellData, rowData, row, col) {
                if ( cellData == 'Not assigned' ) {
                  $(td).css('color', 'red');
                }
              }
            },
             {
            className: 'control',
            orderable: false,
            targets:   0,
      defaultContent: ""
        }
        ]
    } );
} );

did the trick.
I had to add the NULL in columns:[] and the defaultContent:'' in columnDefs:[]
It might not be very elegant, but it works.

colin

Hi @OscarC and Kevin,

Thanks for that way to reproduce - agreed, somehow it looks like it's regressed in the nightly builds. I'll raise an issue for this and will report back here when addressed.

Cheers,

Colin

colin

Just an update, forgot to say this has now (a week ago) been fixed in the nightly builds.