Use fnGetData w/Ajax data source

Use fnGetData w/Ajax data source

dsimmonsdsimmons Posts: 7Questions: 0Answers: 0
edited October 2012 in DataTables 1.9
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
} );
} );

Replies

  • allanallan Posts: 63,489Questions: 1Answers: 10,470 Site admin
    See this FAQ: http://datatables.net/faqs#ss_events

    Basically you want to use:

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

    Allan
  • dsimmonsdsimmons Posts: 7Questions: 0Answers: 0
    edited October 2012
    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);
    })
    }
    });
  • dsimmonsdsimmons Posts: 7Questions: 0Answers: 0
    Figured it out!
  • allanallan Posts: 63,489Questions: 1Answers: 10,470 Site admin
    Out of interest, what was the fix you used?

    Allan
  • dsimmonsdsimmons Posts: 7Questions: 0Answers: 0
    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();
    }
    }
This discussion has been closed.