jquery DataTables plugin: can you capture server-side data other than the JSON expected by the plugin?

Question

I'm using "bServerSide": true, "sAjaxSource":, and "fnServerData":... to populate the datatable. This is working fine.

 "bFilter": true,
"bSort": true, 
"bSortClasses": true, 
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "my_page_that_outputs_json.asp",

"fnServerData": function ( sSource, aoData, fnCallback ) {
    aoData.push( { "name": "my_custom_var"  , "value": $('#someCustomVar').val() } );                   
    $.getJSON( sSource, aoData, function (json) { 
        fnCallback(json);  
    } );
},

However, when I make the call to the server, I want to return more than just the JSON from the page connecting to the server. I have additional recordsets I'd like to return with just the one call to the database, but is this possible within the datatables framework? The page outputting the JSON, when retrieved by the datatable, is only expecting the JSON, and gives an error when any other elements are present.

Update 1: don't know if this is a proper route to take, but I'm thinking now that one options would be to use datatables hidden column feature. http://www.datatables.net/examples/basic_init/hidden_columns.html I suppose you could stuff elements with ID's in a single cell in the hidden column, and then access the ID's info via jQuery.

Update 2: Maybe this is how the other elements on the parent page can be updated from elements in the JSON response page (I've also posed this issue in the datatables forum, with no response):

1. add and include ID's for each hidden input in the first row of json data

2. don't try hidden columns, because elements seem to be inaccessible when the column is hidden. (if I'm wrong about this, someone please inform...)

3. if the hidden input only needs to be rendered once, then do so

4. access the hidden input via jQuery on the parent page

Update 3: @JM4 - I don't know that this will specifically address your question, but I was able to use the hidden input route - e.g.,<input type="hidden id="myCustomID_012" /> - and get done what I needed to do.

I used a function similar to the following to handle the row click. This function was outside of the dataTable build.

function clickRowHandler() {
/* Highlight selected row on single click */
$('.tblIntrepid tbody tr').click(function(event) {
    $(oTable.fnSettings().aoData).each(function (){
        $(this.nTr).removeClass('row_selected');
    });

    // update the myIntrepidID value for form "complete" submission
            // myIntrepidID was already on the page, not in the dataTable
    var myNewIntrepidID = $(this).find("td:first input").val(); 
    $('#myIntrepidID').val(myNewIntrepidID); 
    // set the row class
    $(event.target.parentNode).toggleClass('row_selected');
    });
   /* more details */
  }

Inside the dataTable build, the clickRowHandler function was called in this manner:

"fnDrawCallback": function() {
        clickRowHandler();
},

Also, I can't remember where I saw this in the DataTables forum (probably started here: http://datatables.net/forums/comments.php?DiscussionID=3931) but another route you can use is to output json data above-and-beyond what dataTables requires. So, while you need to output json that includes "sEcho" and "iTotalRecords" and "iTotalDisplayRecords" and "aaData", you can also make your own name/value pairs.

If you had a list of 10 usernames you wanted in a select dropdown in the table header, you could build a name/value pair in the place you build your json, and call it "selectUserNames". Then in your dataTables build, you would turn that custom json object into your list (I'm not displaying all of the functions here):

This function, outside of the dataTables build, creates the select dropdown. // http://datatables.net/forums/comments.php?DiscussionID=3931&page=1#Item_6

function fnCreateSelect( aData ) {
    var r='<select><option value=""></option>', i, iLen=aData.length;
    //alert(iLen); 
    for ( i=0 ; i<iLen ; i++ )
    {
        r += '<option value="'+aData[i]+'">'+aData[i]+'</option>';
    }
    return r+'</select>';
}

And inside the dataTables build...

  $.getJSON( sSource, aoData, function (json) { 
     if ( json.sEcho == 1 ) {
        $("thead td.search").each( function () {

/* Insert the select menu */
this.innerHTML = fnCreateSelect(json.selectUserNames);

/* Add the event listener for the newly created element */
   $('select', this).change( function () {
     oTable.fnFilter( $(this).val(), 8 );
   });
});

Answer 1

If you use drawcallback to add a class to the current row (for exemple add a selected class), it is possible to retrieve hidden values.

Here is my fnDrawCallback function that add 'row_selected' class on the current row. It works only if this is the only row with this class.

"fnDrawCallback": function(){
  $('td').bind('mouseenter', function () { $(this).parent().addClass('row_selected').css('cursor', 'pointer'); });
  $('td').bind('mouseleave', function () { $(this).parent().removeClass('row_selected'); });
},

The problem when you populate the table with json is that the nodeName of the selected node is undefined. So instead of this, you can find the row with your selected class

$("#leadList tbody").click(function(event) {
  var aTrs = table.fnGetNodes();
  for ( var i=0 ; i<aTrs.length ; i++ ) {
    if ($(aTrs[i]).hasClass('row_selected') ) {
      // here you get the data without the need of fnGetPosition
      var aData = table.fnGetData( i );
      location.href='mylink/' + aData[0];
    }
  }
});