responsive in conflict with columns.defaultContent button

liviu.daniel

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?

allan

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.daniel

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?

allan

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.daniel

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.daniel

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.

allan

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.daniel

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!

allan

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

kwarren

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.

colin

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