Selectable rows

schnibitz

Hi, I'm having a heck of a time getting this:

[code]
$('#example tr').click( function() {
if ( $(this).hasClass('row_selected') )
$(this).removeClass('row_selected');
else
$(this).addClass('row_selected');
} );

[/code]
to actually work. I'm just inserting it into my code right after the document ready line. Is there anything else I need to do to get it working? Maybe a script I need to be including, or some css pre-req?

Thank you,
-S

schnibitz

P.S.
Here's how it looks in full-context. The table auto-refreshes as well. Hope it helps!

[code]
var oTable;
var giRedraw = false;

$.fn.dataTableExt.oApi.fnReloadAjax = function ( oSettings, sNewSource, fnCallback, bStandingRedraw )
{
if ( typeof sNewSource != 'undefined' && sNewSource != null )
{
oSettings.sAjaxSource = sNewSource;
}
this.oApi._fnProcessingDisplay( oSettings, true );
var that = this;
var iStart = oSettings._iDisplayStart;

oSettings.fnServerData( oSettings.sAjaxSource, [], function(json) {
/* Clear the old information from the table */
that.oApi._fnClearTable( oSettings );

/* Got the data - add it to the table */
for ( var i=0 ; i

allan

Use a live event: http://datatables.net/faqs#events .

The DOM nodes in your table are being created after you add the event handler - so "$('#example tr').length === 0" when you run your code.

Allan

schnibitz

Would that be something like this?

[code]
$("#example").live("click", function(event){
$("td.row_selected", oTable.fnGetNodes()).removeClass('row_selected');
$(event.target).parent().find("td").addClass('row_selected');
});
[/code]

I tried putting that in place of my code, but no-go.

allan

Try this:

[code]
$("#example tbody tr").live("click", function(event){
  oTable.$("tr.row_selected").removeClass('row_selected');
  $(this).addClass('row_selected');
});
[/code]

Note that that sample uses the 1.9 $ API method. The 1.8 approach (I think... there might be quirk about the selector) would be:

[code]
$("#example tbody tr").live("click", function(event){
  $(".row_selected", oTable.fnGetNodes()).removeClass('row_selected');
  $(this).addClass('row_selected');
});
[/code]

Much easier to use 1.9 :-)

Allan