responsive in conflict with columns.defaultContent button

responsive in conflict with columns.defaultContent button

liviu.danielliviu.daniel Posts: 19Questions: 6Answers: 0
edited August 2017 in Free community support

Hi,

I've notice that when responsive is active, the button created with columns.defaultContent doesn't work anymore.

Here is the code that I'm using:

    // Activate an inline edit on click of a table cell
    // or a DataTables Responsive data cell
    $('#myDb').on( 'click', 'tbody td:not(.child), tbody span.dtr-data', function (e) {
        // Ignore the Responsive control and checkbox columns
        if ( $(this).hasClass( 'control' ) || $(this).hasClass('select-checkbox') ) {
            return;
        }
 
 //       editor.inline( this );
    } );


var table = $('#myDb ').DataTable( {
        responsive: true,
        ajax: 'php/table.campus_publications.php',
        columns: [
            {
                "data": "First Name"
            },
            {
                "data": "Last Name"
            },
            {
                "data": "link"
            },
            {
                    "targets": -1,
                                "data": null,
                                "defaultContent": "<button>PDF</button>"
            }
        ],
        select: true,
        lengthChange: false
    } );

 $('#myDb tbody').on( 'click', 'button', function () {
        var data = table.row( $(this).parents('tr') ).data();
        window.open(data['link'], data['Last Name']);
    } );

When I press the + button to see all the columns, the button appears but it doesn't take any action when pressing.

Also, is there any way to put an icon on that button?

Any solution?

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin

    When it is in the child row $(this).parents('tr') will resolve to the child row - not the parent row - thus DataTables won't find it in the row() selector. You would need to use $().prev() when in the child row to get the parent row first. A check to see if you are in the child row would be the best way to do that (i.e. check the class name of the row).

    Also, is there any way to put an icon on that button?

    Add a class to it and use CSS to apply a background image.

    Allan

  • liviu.danielliviu.daniel Posts: 19Questions: 6Answers: 0
    edited August 2017

    Hi @allan ,

    I tried to do what you suggested, but it doesn't work.

     $('#example tbody').on('click', 'td.details-control', function () {
    
        $('#myDb tbody').on( 'click', 'button', function () {
            var data = table.row( $(this).parents('tr') ).data();
          if ( data.child.isShown() ) {
                data = table.row( $(this).prev('tr') ).data();
                window.open(data['link'], data['Last Name']);}
        } );
    

    And for the icon of the button I did


    var table = $('#myDb').DataTable( { ajax: 'php/table.myDb.php', responsive: true, columns: [ { "data": "First Name" }, { "data": "Last Name" }, { "targets": -1, "data": null, "defaultContent": "<button>Details</button>", "text": '<i class="fa fa-file-pdf-o"></i>', "titleAttr": 'PDF' } ], select: true, lengthChange: false } );

    But it doesn't change it. I have the font awesome in the html.


    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">

    Am I doing something wrong?

  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin

    You are assigning a click event for the button, inside a different click event handler. So it would only work onces the outer click has been activates. I doubt that is what you want.

    Have the delete button event handler on its own, and then use my suggestion from above to determine if the click happened inside a child row, or a regular DataTable row.

    Allan

  • liviu.danielliviu.daniel Posts: 19Questions: 6Answers: 0
    edited August 2017

    Hi allan,

    I don't quite understand how to do it. I'm new to datatables and also I'm more familiar with C++ than Javascript, May I ask for the exact line of code that I have to insert there?

    I just switched from the trial to the full version, cleared the cache moved the date of my PC forward to pass the trial days that I still have and it asks me for the license. After purchasing I was redirecting to a page that informed me what files to replace to switch from trial to the full version and did exactly as it said. Do I need to do anything else? I will try also to restart the server.

    Thank you!

  • liviu.danielliviu.daniel Posts: 19Questions: 6Answers: 0
    edited August 2017

    Update. I solved the licensing problem and the icon, but I still struggle with the button not taking any action when the responsive is true.

  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin

    Perhaps you could show me your latest code which incorporates the changes suggested above, so I can see where you are up to and give a suggestion on how to move on from there.

    Thanks,
    Allan

  • liviu.danielliviu.daniel Posts: 19Questions: 6Answers: 0
    edited August 2017

    Hi allan,

    Here is a test case:

    https://jsfiddle.net/ppmn8L4y/

    So basically, if the screen is too small and the responsive is on, when responsive draws the table to fit the page, and the button goes on the details tab, the button doesn't take any action when pressed.

    Well, nothing that I tried worked. I tried to put an ID to the button and listen for the id, but it failed as well.

    Thank you!

  • allanallan Posts: 61,436Questions: 1Answers: 10,049 Site admin
    Answer ✓

    As I say, you need to check to see if the button is in the child row or not, and if it is, go back to the parent row:

     $('#example tbody').on( 'click', '[id*=viewPDF]', function () {
            var row = $(this).closest('tr');
            if ( row.hasClass('child') ) {
                row = row.prev();
            }
            var data = table.row( row ).data();
            window.open(data['details'], data['title']);
        } );
    

    https://jsfiddle.net/ppmn8L4y/1/

    Allan

  • kwarrenkwarren Posts: 1Questions: 0Answers: 0

    I ran into the same thing. I'd describe it as a conflict between "child row" and "responsive". responsive, in the "collapsed" state, creates it's own "child row" [with button and html generator]. in the table settings you can hide the responsive button(icon, though I believe the click (responsive)handler is still intact) [responsive.details.type]. and then on the click handler for child row, merge/append your html to the child-row-td (if in collapsed state - can check table classes) that the responsive thing made.

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    Hi @kwarren ,

    Yep, as the compatibility page states

    Responsive's modal display option should be enabled if used with child rows, as the default display method is to use child rows, which would override 'user space' use of child rows.

    Cheers,

    Colin

This discussion has been closed.