Event click responsive table

Event click responsive table

Kalle504Kalle504 Posts: 16Questions: 5Answers: 0

Hello,

I can not get the click event to work when the table is in responsive mode.

If I click '41,803,125' in the picture I would like to Alert:

"Argentina, Population, 41,803,125"

Example: https://jsfiddle.net/rjtnfdw8/

This question has an accepted answers - jump to answer

Answers

  • colincolin Posts: 15,146Questions: 1Answers: 2,586
    Answer ✓

    It's because when the data is being responsively shown, it's no longer in a td, it's in an li, so you'll need to handle that differently.

    This example demonstrates that, but the important code is:

      $('table tbody').on( 'click', 'li', function (e) {
         alert( table.cell( $(this).closest('tr').prev('tr'), $(this).attr('data-dtr-index') ).data() );
         e.stopPropagation();
        } ); 
    

    Colin

  • Kalle504Kalle504 Posts: 16Questions: 5Answers: 0

    Thanks Colin!

    Sorry for asking more!

    If I click '41,803,125' in the picture how do I get

    "Argentina" and "Population" ?

  • Kalle504Kalle504 Posts: 16Questions: 5Answers: 0

    I solved it. For someone else.

    Argentina:
    alert( table.cell( $(this).closest('tr').prev('tr'), 0).data() );

    Population:
    idx = (table.cell( $(this).closest('tr').prev('tr'), $(this).attr('data-dtr-index') ).index().column);

    var title = table.column( idx ).header();
    alert($(title).html()

This discussion has been closed.