require explanation on code snippet

ashiers

Hi there,

As I try to understand the Join feature from example: http://editor.datatables.net/release/DataTables/extras/Editor/examples/join.html

I look at the js file and see the following code snippet:

"fnInitComplete": function ( settings, json ) {
// Set the allowed values for the select and radio fields based on
// what is available in the database
editor.field('dept.id').update( json.dept );
editor.field('access[].id').update( json.access );
}

If we were to just focus on the "access" option, this presents 6 options for the user: Printers, Servers, Desktop, VMs, Web-site, Accounts.
I don't understand what's happening here. How is it the 6 options are being obtained? Is there a separate query call to the server for the options? I don't see any evidence of it in Firebug. If the options aren't explicitly being set in our javascript code, then I don't see where the information is coming from. I'm kinda sketchy on the use of JQuery as I'm just a newbie at it. I need someone to explain what this code is doing, breaking it down line by line. Please advise.

Alan

psharp

@Alan,
in the firebug display, there should be a "net" tab. If you select the call to your PHP script (the one that populates the table), you can see the "response" from your script.

In that, you should be able to view the json response from the server. It should include the aaData group (to populate the datatable) and perhaps some additional key value pairs (sEcho, datalength, etc..) as well. I'll bet that if you can see the "access" value, you will notice that it's a json encoded array of 6 objects.

ashiers

Yes, I found additional info appended to the end of the JSON string for both the dept and access objects. I was wondering how it got there.

Then I discovered that the PHP file contained an additional piece of code I had not seen before:

if ( !isset($_POST['action']) ) {
// Get department details
$out['dept'] = $db
->select( 'dept', 'id as value, name as label' )
->fetchAll();

$out['access'] = $db
->select( 'access', 'id as value, name as label' )
->fetchAll();
}

After seeing this, I started putting 2 & 2 together. I looks like additional data is being appended by running select queries on the fields provided. The extra data then gets sent back via the JSON string and the update function calls:
editor.field('dept.id').update( json.dept );
editor.field('access[].id').update( json.access );
are then reading in the necessary data from the JSON string. Right?

Alan

psharp

@Alan,

Yes, exactly.

There is an example in the forums somewhere, that describes extending the 'fnServerData' method, to allow you to harvest additional information from the json response. I use this to gather grouping totals and in conjunction with the rowGrouping addon, I'm able to display "group" totals.

The rowGrouping addon uses hidden columns and solves many issues on converting existing (windows based) reports, into a jquery/datatables/html web version.

But, returning from the digression :), you can pretty much add any kind of data you wish to the json response and use it to enhance the datatables functionality. Very dynamic this datatables plug in is!