Joins within javascript loaded JSON data (not AJAX)

rickbarnsley

Hi,

Am looking to recreate the functionality shown at https://editor.datatables.net/examples/inline-editing/join.html, with one key difference... I do not want to load the data using the "ajax" parameter, I want to load it using the "data" parameter.

I've copied the example and removed the ajax parameter, replacing with a data parameter that contains the same data in the same structure as described at that link.

What happens is that no data shows in the table.

I then change the data parameter to point at the "data" field at the top level of the JSON object. The result is that data now shows in the table. HOWEVER... when you click into a field that references a joined table the select box appears and contains no options. The control hasn't made the association correctly.

I suspect this is to do with differences in the underlying data structure required by default for ajax vs the data parameter, however could someone explain how to do joins when loading the data in this way (non ajax) ?

colin

Hi @rickbarnsley ,

Are you using Editor? That's an Editor example you posted.

It would help here if you could link to a test case. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

rickbarnsley

Hi Colin, thanks for the quick reply - yes am using Editor... the forums link on the Editor part of the site took me to the same Forums as the DataTables area, so assumed it was OK to post about Editor here.

Will create a test case as you suggest and point to it. Thanks for the tip.

Rick

rickbarnsley

Here we go: http://live.datatables.net/baqimasi/1/edit?html,css,js,output

rickbarnsley

Try clicking into any field except location - all editable.

Try clicking into the location field - turns to an HTML select control, but no options.

Data structure of "obj" is the same as what is returned by the ajax call on the example page.

I can't see any configuration option as to where to point the editor control at to pick up the list of locations to populate the HTML select, or maybe there's another data structure I should be using for "obj" - but I can't find anything mentioned in the documentation.

rickbarnsley

Compare with a similar test at:
http://live.datatables.net/jomeqolu/1/edit?html,css,js,output

The only difference is that the same data in the same structure is pulled via ajax from http://myjson.com/173u3i

Note that in this test, the dropdowns contain the relevent options in the location field.

allan

Hi Rick,

I got your e-mail via e-mail as well - just for completeness, this was my reply:

You are absolutely correct, if you are passing data into the DataTable as a configuration option, you need to pass in the data array:
https://datatables.net/reference/option/data

With the Ajax loading, it can pull out the array of data from the loaded object (pointed to by the ajax.dataSrc option) allowing the JSON to also carry other information such as the options. If you are populating the table directly, then you need to do the same with the select options, which is done through the options parameter for the field:
https://editor.datatables.net/reference/field/select#Options

Where it gets a little more interesting is with a join where the label and value for the select option don't match (since both need to be in the data set). This little example shows how joined data can be done with local table editing (I'm not clear if you are using local table editing or submitting edits via Ajax):
http://live.datatables.net/layonado/2/edit

This is your updated example with the options property for the select element specified. The link I give above shows how it can operate with local table editing if you don't have Editor making an Ajax call.

Allan

rickbarnsley

Thanks for the comprehensive answer Allan!

Looks like the last one gives me enough to solve my issue. I will be submitting edits over AJAX but will be tackling that in due course.

Many thanks for the prompt reply.