child-row expand button in responsivePriority

child-row expand button in responsivePriority

OscarCOscarC Posts: 19Questions: 5Answers: 0

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?

Answers

  • colincolin Posts: 15,142Questions: 1Answers: 2,586

    Hi @OscarC ,

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

    Cheers,

    Colin

  • OscarCOscarC Posts: 19Questions: 5Answers: 0

    @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?

  • kthorngrenkthorngren Posts: 20,269Questions: 26Answers: 4,765

    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

  • OscarCOscarC Posts: 19Questions: 5Answers: 0

    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.

  • colincolin Posts: 15,142Questions: 1Answers: 2,586

    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

  • colincolin Posts: 15,142Questions: 1Answers: 2,586

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

This discussion has been closed.