Use fnGetData w/Ajax data source

dsimmons

The example in the documentation to get TR data when clicked works perfectly using DOM data source, but fails to get row data when using Ajax data source. Should oTable.$('tr').click function be inside fnInitComplete function, and if so, how to make it work?

The example says:
// Row data
$(document).ready(function() {
oTable = $('#example').dataTable();

oTable.$('tr').click( function () {
var data = oTable.fnGetData( this );
// ... do something with the array / object of data for the row
} );
} );

allan

See this FAQ: http://datatables.net/faqs#ss_events

Basically you want to use:

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

Allan

dsimmons

Thanks Allan for your help.

Here is what I currently have. When I click on a TR in the table, the error is "aoData is null or not an object." I'm trying to populate a form on the same page when the user clicks a row in the table. I suspect with this configuration that an object is being returned for the row, not an array, and I'm not sure how to get to the data for each column. --- Denise

$(document).ready(function() {

oTable = $("#QuestionsList").dataTable({
"bRetrieve":true,
"bDestroy":true,
"bJQueryUI": true,
"bProcessing": true,
"sDom": "t<'F'ip>",
"sAjaxSource": 'lists/getQuestionsList.asp?action=loadEditJSON',
"sScrollY": $(window).height() / 2,
"bPaginate": false,
"aaSorting": [],
"aoColumnDefs": [
{"aTargets":[0], "mData":"QUESTION_ID"},
{"aTargets":[1], "mData":"QUESTION_DESC"},
{"aTargets":[2], "mData":"QUESTION_DETAIL", "bSortable":false},
{"aTargets":[3], "mData":"TXT_EDIT_FLG"},
{"aTargets":[4], "mData":"CREATED_BY"},
{"aTargets":[5], "mData":"CREATED_DT"},
{"aTargets":[6], "mData":"MODIFIED_BY"},
{"aTargets":[7], "mData":"MODIFIED_DT"}
],
"fnInitComplete": function(oSettings, json) {
alert('DataTables has finished initialization.');
},
"fnDrawCallback": function(oSettings) {
alert('DataTables has redrawn the table');
$("#QuestionsList").on('click', 'tr', function(event) {
loadDialogForm(this);
})
}
});

dsimmons

Figured it out!

allan

Out of interest, what was the fix you used?

Allan

dsimmons

The fix I thought would work was to send the rowIndex to fnGetData, however that was problemmatic whenever the table was filtered or sorted. Working code now is:

---INITIALIZATION---

oTable = $("#QuestionsList").dataTable({
"bRetrieve":true,
"bDestroy":true,
"bJQueryUI": true,
"bProcessing": true,
"sDom": "t<'F'ip>",
"sAjaxSource": 'lists/getQuestionsList.asp?action=loadEditJSON',
"sScrollY": $(window).height() / 2,
"bPaginate": false,
"aaSorting": [],
"aoColumnDefs": [
{"aTargets":[0], "mData":"QUESTION_ID"},
{"aTargets":[1], "mData":"QUESTION_DESC"},
{"aTargets":[2], "mData":"QUESTION_DETAIL", "bSortable":false},
{"aTargets":[3], "mData":"TXT_EDIT_FLG"},
{"aTargets":[4], "mData":"CREATED_BY"},
{"aTargets":[5], "mData":"CREATED_DT"},
{"aTargets":[6], "mData":"MODIFIED_BY"},
{"aTargets":[7], "mData":"MODIFIED_DT"}
],
"fnInitComplete": function(oSettings, json) {
//alert('DataTables has finished initialization.');
},
"fnDrawCallback": function(oSettings) {
$("#QuestionsList tbody tr").on('click', function() {
var aRow = this;
loadQuestionDialogForm(aRow);
})
}
});

---FUNCTION---

function loadQuestionDialogForm(aRow) {
var trData = $("#QuestionsList").dataTable().fnGetData(aRow);

if (trData["TXT_EDIT_FLG"] == "N") {
alert("Edit not permitted for Question ID " + trData["QUESTION_ID"]);
}
else {
$("#question_id").val(trData["QUESTION_ID"]);
$("#question_desc").val(trData["QUESTION_DESC"]);
$("#question_detail").val(trData["QUESTION_DETAIL"]);
$('#QUESTION_FORM_AREA').dialog("open");
$("#question_desc").focus();
}
}