CODEWITHSUNDEEP
javascriptjquerydatatables
fanbondi
fanbondi

Reputation: 1047

Datatable tr click function

I want to do some operations after clicking a particular row. I followed the API and this is what I ended up with but the click event is not working. 

  $(document).ready(function() {
    table = $('#employees').dataTable( {
        "bJQueryUI": true,
        "bProcessing": true,
        "bServerSide": true,
        "sAjaxSource": "show_employee_processor.php",

        "aoColumns": [
        { "sTitle": "Empoyee ID" },
        { "sTitle": "Last Name" },
        { "sTitle": "First Name" }, 
        { "sTitle": "BBan Number" },
        ]
    } );

    table.$('tr').click(function() {
        var data = table.fnGetData( this );
        alert(data);
    });


} );

The datatable is getting drawn but the click event is not working. What am I missing?

Upvotes: 2

Views: 6323

Answers (2)

Tuhin
Tuhin

Reputation: 3373

$("#employees tr").click( function( e ) {
          if ( $(this).hasClass('row_selected')==false ) {
                table .$('tr.row_selected').removeClass('row_selected');
                $(this).addClass('row_selected');
                    var data = table.fnGetData( this );
                    alert(data);
          }
      else{
           $(this).removeClass('row_selected');
           }
    });

CSS>

#employees tr.row_selected{
    background-color:#B5CCD2;
    opacity:0.95;
    font-weight:bold;
}

Upvotes: 0

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62488

try delegated event:

table.on('click','tr',function() {
        var data = table.fnGetData( this );
        alert(data);
    });

or:

$('#employees').on('click','tr',function() {
            var data = table.fnGetData( this );
            alert(data);
        });

Upvotes: 3

Related Questions