CODEWITHSUNDEEP
jqueryjquery-pluginsdatatables
RubyRedGrapefruit
RubyRedGrapefruit

Reputation: 12224

How can I tell what row of a jQuery dataTable was clicked?

I want to include a delete link in a table column, using the jQuery dataTables plugin. I am certain this is easy. I have no problem adding columns, and I know the syntax for actually removing the table, I just don't know the row that is clicked on.

The rows are added dynamically through the UI, so I'm not rendering any rows other than the header in the beginning.

Upvotes: 0

Views: 1898

Answers (3)

Daniel
Daniel

Reputation: 37071

another example...

$("#TableID tbody").delegate("tr", "click", function() {
    var iPos = oTable.fnGetPosition( this );//oTable is the table object itself
    if(iPos!=null){
        //couple of example on what can be done with the clicked row...
        var aData = oTable.fnGetData( iPos );//get data of the clicked row
        var iId = aData[1];//get column data of the row
        oTable.fnDeleteRow(iPos);//delete row

    }

});

Upvotes: 1

Tim Wright
Tim Wright

Reputation: 101

Dynamically assign each row a unique id on creation and make the click event for each row remove the element with that id

Upvotes: 0

Ian E
Ian E

Reputation: 304

I did this recently to hide/show extra info for each row. Here's a snippet of my code:

        function fnTableRowClickHandler()
        {
            var nTr = this;
            var oT = $(this.parentNode.parentNode).dataTable()

            if ( $(this).hasClass('highlighted') )
            {
                /* This row is already open - close it */
                oT.fnClose( this );
                $(this).removeClass('highlighted')
            }
            else
            {
                /* Open this row, if it's classy enough */
                if ( oT.fnGetData( nTr ) == null ) return;

                $(this).addClass('highlighted')
                oT.fnOpen( nTr, fnFormatDetails(oT, nTr), 'listingDetails opened' );
            }

        }

I had to add that check against null in the else because it would add a short empty extension to each item in the expanded row if the additional info was clicked.

Later add the handler to the table:

 $("#TableId tbody tr").live( 'click', fnTableRowClickHandler )

Upvotes: 1

Related Questions