child-row expand button in responsivePriority

child-row expand button in responsivePriority

OscarCOscarC Posts: 10Questions: 2Answers: 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: 3,107Questions: 0Answers: 538

    Hi @OscarC ,

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

    Cheers,

    Colin

  • OscarCOscarC Posts: 10Questions: 2Answers: 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: 4,342Questions: 19Answers: 947

    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: 10Questions: 2Answers: 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: 3,107Questions: 0Answers: 538

    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

Sign In or Register to comment.