Master/Detail pattern under 1.8

justSteve

I'm getting ready to update a handful of 1.6-based tables. It looks as though DataTables has changed quite a bit since then - Master/Detail handling was not exactly native. Basically, we had to construct the master table; then a separate subtable for each row in master; then hide the children until the given master row was expanded. Has this pattern changed over these last couple revs?

Looking at http://www.datatables.net/release-datatables/examples/server_side/row_details.html i find something close to what I've been referring to 'Master/Detail', except it looks as tho the detail is a one-to-one, 'static' detail. I'm looking for a sample where, for example, each row is Customer Info and the linked 'detail' section is all orders by that customer.

Perhaps the phrase 'Parent/Child' would be better than 'Master/Detail'.

Great to see the project still active and as polished as ever. Must mean enough of us are donating enough to make it worth the while.

Stephan

Hi.
Approach with one Table:
Make use of mDataProp. The OrdertableJSONObject could be nested within the Original Object.
http://www.datatables.net/blog/Extended_data_source_options_with_DataTables

Approach with 2 different tables:
I would suggest two tables, the so called mastertable with customerinfo and a second table for displaying the orders (initially hidden).
For the childtable you use fnServerData to get some push some extra value to your serverside script.
[code]
//var for extra data being pushed to the serversidescript
var customerID = "";

oChildtable = $('#childtableDiv').dataTable( {
"bServerSide": true,
"bProcessing": true,
"sAjaxSource": yourServerSideScript.jsp", // i would suggest an extra serverside script for childtable
"fnServerData": function ( sSource, aoData, fnCallback ) {
aoData.push({"name": "parameterNameForServerSideProcessing", "value": customerID});
$.getJSON( sSource, aoData, function (json){
fnCallback(json)
});
}
[/code]

In the mastertable you need an onclick function (for a button, image, td, tr, whatever you prefer). This onclick function sets the customerID of the code snippet and then calls oChildtable.fnDraw().
This way you would only generate the ordertable, if it is really needed.

justSteve

Thankx much Stephan - i appreciate the detail. Since my OP I've also found http://www.datatables.net/blog/Drill-down_rows which is helpful.

allan

Hi justSteve,

Good to see you back here again :-).

The basic approach that DataTables has to master / detail has not changed since v1.0 of DataTables - i.e. the fnOpen and fnClose functions which provide the master / detail options. I remember putting them in way back when I first started working on DataTables for exactly the kind of drill-down data that you describe, and which are in the blog post that you link to. Those API methods, although they have been refined a bit, haven't significantly changed (although with the data source options that Stephan notes in v1.8, this has effectively become a lot more powerful).

fnOpen and fnClose basically give you a new row and a single cell into which you can insert whatever you want - usually extra information about the parent row, formatted up as required - but it could be a form, or another DataTable or whatever you want. So exactly how to answer your question - it depends a bit on what you are looking for :-).

If you just want to insert extra information about the parent row, then the blog post you linked to should hopefully help - but give me a shout if you'd like anything clarified!

Regards,
Allan

anthony

So is Stephan's approach the best way to handle Master-Detail relationships with DataTables? I have a situation now where I am trying to determine whether to go with DataTables as a solution to my project. I have a song table that is cross-referenced to two other tables ( a title table and a tune table). A record in the song table may have many titles and many tunes, and I need to be able to display and edit the records. I was considering jQuery Grid Plugin, but a friend suggested I take a look at DataTables.

Thanks,
Anthony

allan

Hi Anthony,

Yes, I think its a good approach to the problem. Basically the idea is to have the data source objects contain more information than is needed to display just the table (i.e. they carry the 'details' information as well) and then you can get that information when needed using the fnGetData or _ methods.

Of course if the 'details' information is huge, then you might not want to take this approach of transmitting information that might not be used, in which case an Ajax request when it is requested is the way to go. As with everything, the "best" solution will depend on a number of factors! It doesn't really matter how you get the data, as long as it ends up in the details row :-)

Regards,
Allan

eyeruleall

[quote]Stephan said: In the mastertable you need an onclick function (for a button, image, td, tr, whatever you prefer). This onclick function sets the customerID of the code snippet and then calls oChildtable.fnDraw().

This way you would only generate the ordertable, if it is really needed.[/quote]

Is there any way someone can provide an example of this? I'm trying to insert a details column with that uses data from a one to many relationship (details is the 'many').

I need to set the customerID variable to the data that comes from row 0 from the master table so I can use it in my php code.