Responsible table and click

marcpirat

hi

I have an datable who is responsive

var specificationsTable = $('#specificationsTable').DataTable({
    "language": {
        "url": url
    },
    'dom': 'tp',
    responsive: {
        details: {
            display: $.fn.dataTable.Responsive.display.childRowImmediate,
            type: ''
        }
    },
    "bLengthChange": false, //hide 'show entries dropdown
    "paging": false,
    "searching": false,
    "info": false
});

I have this click event

$("#specificationsTable tbody").on('click', 'td', function(e) {

    var tr = $(this).closest('tr');

    //in case row is displaye on many row... (responsive)
    if ( $(tr).hasClass('child') ) {
        tr = $(tr).prev();  
    }


    //delete button
    if(specificationsTable.cell(this).index().column == specificationsTable.columns()[0].length-1){
       ...
    }

});

That work when all column are displayed on the same row... but otherwise, this line
specificationsTable.cell(this).index().column

is not working, I get

Cannot read property 'column' of undefined

thanks

colin

Hi @marcpirat ,

We're happy to take a look. As per the forum rules, if you could link to a running test case showing the issue we can offer some help. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

marcpirat

ok i created an example: live.datatables.net/gatirugi/1/edit?html,js,output

kthorngren

You may need to use two click events; one for normal columns and one for the li elements used in the responsive child details. Apparently the responsive.index() is deprecated but it does contain some details about the child details. It looks like you can use the dt-column data attribute to get the column index. I updated your example to show one option of doing this:
http://live.datatables.net/deliqaxu/1/edit

Kevin

marcpirat

thank, that work well