Clientside sAjaxSource with clickable row that sends id

JohnEzlab

I am happily using client side datatables in a Rails app. I have a need to click a row in my datatable, open a form in a bootstrap modal, save the changes via ajax and then have my datatable refresh. I was able to get the first few steps working but struggled to refresh the the datatable after ajax success. I believe fnReloadAjax is the correct plugin to use and therefore I have change my datatable initialisation to use sAjaxSource which results in the datatable being populated correctly (though I have yet to try updating it after ajax success).

I would now like to be able to click on a row and open my modal to update details. Previously I was able to do this in Rails and pass the id of object selected [code][/code]

I see I can use js to capture the row click (as below), but I am unsure as to how to pass the id of the object:
[code] $('#reminders-table tbody').on( 'click', 'tr', function (e) { alert('hello');} );[/code]

EDIT: my apologies, please close this question as I found the answer here: http://datatables.net/forums/discussion/333/get-id-on-click/p1

[code]
$("#example tbody").live( 'dblclick', function(event) {
var iPos = oTable.fnGetPosition( event.target.parentNode );
var aData = oTable.fnGetData( iPos );
var iId = aData[0];
console.log( iId );
});
[/code]

allan

I'd suggest you use `on` in jQuery these days, since `live()` was removed a few versions ago. Also note that you don't need to use fnGetPosition here, or even fnGetData in this particular case:

[code]
$('#example tbody').on( 'dblclick', 'tr', function () {
console.log( $(this).data('id') );
} );
[/code]

No DataTables - just plain jQuery...

Allan

JohnEzlab

Thanks for helping with this Alan.

When I enter $(this) in the console I only get the html for the table row. It has no 'id' attribute. For example:

[code]
[
Test message 1
test sub message
]
[/code]

I should highlight that I am simply using click, not dblclick:
[code]$('#reminders-tab-table tbody').on( 'click', 'tr', function (e) {[/code]

Another question I have is regarding date format, previously I would format the date in my datatable rows with Ruby code, now that I am using sAjaxSource and mData, is it advisable to try and format the date before I send the JSON as the aAjaxSource?

allan

Your code above suggests there is a `data-id` attribute. Is that not the case?

> is it advisable to try and format the date before I send the JSON as the aAjaxSource?

To be honest, it really doesn't matter! It might be easier to sort is the only thing if you use mRender to format a date stamp, since a datestamp can be sorted as an integer. The other only thing to consider is where you want most of your logic to be.

Allan

JohnEzlab

Oh, I see. The data-id was when I was generating the table html with the help of ruby/rails:
[code][/code]

Now that I am using sAjaxSource I create my table body simply with:
[code]




[/code]

Is there a way for me to add a data-id attribute when using sAjaxSource and mData?

allan

You can use fnCreatedRow to manipulate the node.

Or if the data is in the array you could simply do:

[code]
$('#example tbody').on( 'dblclick', 'tr', function () {
console.log( table.fnGetData( this )[0] );
} );
[/code]

(assuming you are using an array data source and the id is in index 0).

Allan