Reputation: 12224
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
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
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
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