Ajax datasource and and single row select

PatrickO

I'm using an Ajax Datasource(client side) and trying to use a single row event:

var oTable = $('#table_All_Items').dataTable(
{
"sAjaxSource": '../fakeurl.txt',
"fnRowCallback": function (nRow, aData, iDisplayIndex) {
$('#table_All_Items tbody tr').each(function () {
$('#table_All_Items tbody tr').click(function () {
if ($(this).hasClass('row_selected')) {
$(this).removeClass('row_selected');
alert("de-selected");
}
else {
alert("selected");
oTable.$('tr.row_selected').removeClass('row_selected');
$(this).addClass('row_selected');
alert("selected");
}
});
});

}

Any suggestions. The code above creates a table but the click event doesn't seem to work. It fire the alerts only when the table is sorted.

PatrickO

[code]
var oTable = $('#table_All_Items').dataTable(
{
"sAjaxSource": '../fakeurl.txt',
"fnRowCallback": function (nRow, aData, iDisplayIndex) {
$(nRow).on("click", function (event) {
if ($(this).hasClass('row_selected')) {
$(this).removeClass('row_selected');
}
else {
oTable.$('tr.row_selected').removeClass('row_selected');
$(this).addClass('row_selected');
}
});

}
);
[/code]

I've revised my code to the above and it works in an unsorted table, after the table is sorted it fails. Also, in IE one click causes the above event to fire 3 times.

PatrickO

var oTable = $('#table_All_Items').dataTable(
{
"sAjaxSource": '../fakeurl.txt',
"fnRowCallback": function (nRow, aData, iDisplayIndex) {
//$('#table_All_Items tbody tr').each(function () {
//$('#table_All_Items tbody tr').on("click", function (event) {
$(nRow).on("click", function (event) {
if ($(this).hasClass('row_selected')) {
$(this).removeClass('row_selected');
//alert("de-selected");

}
else {
oTable.$('tr.row_selected').removeClass('row_selected');
$(this).addClass('row_selected');
//alert("selected");

}
});
//});

}
I've revised my code to the above and it works in an unsorted table, after the table is sorted it fails. Also, in IE one click causes the above event to fire 3 times.

allan

You are adding the event every time the row is drawn - I'd suggest not using fnRowCallback. Instead do something like:

[code]
var oTable = $('#table_All_Items').dataTable( {
"sAjaxSource": '../fakeurl.txt'
} );

$('#table_All_Items tbody').on( 'click', 'tr', function () {...} );
[/code]

Allan

PatrickO

With your code I get no attached events (I'm guess the rows are redrawn after your last line is executed?).

I ended up with this, which seem to work. Thanks for the help and the great tool...I'll send along some support if I can get it working (and make a couple of $).

var oTable = $('#table_All_Items').dataTable(
{
"sAjaxSource": '../fakeurl.txt',
"fnRowCallback": function (nRow, aData, iDisplayIndex) {
$(nRow).unbind().on("click", function (event) {...});

allan

Odd - I don't see any reason why that code wouldn't work. Here is an example of it working: http://live.datatables.net/afiwax/edit

Normally I would recommend not using event handlers in fnRowCallback as it won't scale very well.

Allan

PatrickO

Thanks Allan, that is working for me now. Not sure why it didn't before.