Selectable rows
Selectable rows
schnibitz
Posts: 15Questions: 0Answers: 0
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
[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
This discussion has been closed.
Replies
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
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
[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.
[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