How to get Datatables to consume this data

Starz26

Good Morning,

I am pasting the data received from the serve exactly as it is formatted in the java variable. How would I go about getting Datatables to consume this data to build the table?

{type:'Contact', Id:'003J0000001rdtoIAA', LastName:'test', FirstName:'test', },{type:'Contact', Id:'003J0000001aDaGIAU', LastName:'User', FirstName:'Portal', },{type:'Contact', Id:'003J0000001rT0nIAE', LastName:'greg', FirstName:'eric', },{type:'Contact', Id:'003J0000001rPAvIAM', LastName:'Long', FirstName:'Lynn', },{type:'Contact', Id:'003J0000001aIHFIA2', LastName:'none', FirstName:'test', },{type:'Contact', Id:'003J0000001tHUNIA2', LastName:'test', FirstName:'dlh', },{type:'Contact', Id:'003J0000003Uj0qIAC', LastName:'TestSave', FirstName:'Eric', }

allan

Two things - that isn't valid JSON (there is a trailing comma in every object) and there is no "root" element (you would need to wrap it in an array.

When it is made into valid JSON then you would set the sAjaxDataProp option to an empty string so it will just read the array, and use mDataProp to read the required object names for each column: http://datatables.net/blog/Extended_data_source_options_with_DataTables

Allan

Starz26

Thanks Allan...

I am now getting: DataTables warning (table id = 'example'): Requested unknown parameter 'recordtypeid' from the data source for row 0

The data looks like:

[quote][{"recordtypeid": "012A0000000gqsVIAQ","lastname": "test","id": "003J0000001rdtoIAA","firstname": "test"},{"recordtypeid": "012A0000000gqsVIAQ","lastname": "User","id": "003J0000001aDaGIAU","firstname": "Portal"},{"recordtypeid": "012A0000000gqsVIAQ","lastname": "greg","id": "003J0000001rT0nIAE","firstname": "eric"},{"recordtypeid": "012A0000000gqsVIAQ","lastname": "Long","id": "003J0000001rPAvIAM","firstname": "Lynn"},{"recordtypeid": "012A0000000gqsVIAQ","lastname": "none","id": "003J0000001aIHFIA2","firstname": "test"},{"recordtypeid": "012A0000000AP0HIAW","lastname": "test","id": "003J0000001tHUNIA2","firstname": "dlh"},{"recordtypeid": "012A0000000AP0HIAW","lastname": "TestSave","id": "003J0000003Uj0qIAC","firstname": "Eric"}][/quote]

and I am creating the table like this

[code]j$('[id$=example]').dataTable( {
"sAjaxDataProp": "",
"aaData": '{!testJSON}',
"aoColumns": [
{ "sTitle": "One", "mDataProp": "recordtypeid" },
{ "sTitle": "Two","mDataProp": "lastname" },
{"sTitle": "Three", "mDataProp": "id" },
{ "sTitle": "four","mDataProp": "firstname" }
]
});[/code]

Sorry to be so dense..

Another question while we are at it. Say I requery for the data, what is the best way to redraw the table with the new data?

Starz26

OK,

Now getting invalid JSON....Here is the latest data: New at JSON so not sure what I am missing here
[quote]
[{"record":{"recordtypeid": "012A0000000gqsVIAQ","lastname": "test","id": "003J0000001rdtoIAA","firstname": "test"}},{"record":{"recordtypeid": "012A0000000gqsVIAQ","lastname": "User","id": "003J0000001aDaGIAU","firstname": "Portal"}},{"record":{"recordtypeid": "012A0000000gqsVIAQ","lastname": "greg","id": "003J0000001rT0nIAE","firstname": "eric"}},{"record":{"recordtypeid": "012A0000000gqsVIAQ","lastname": "Long","id": "003J0000001rPAvIAM","firstname": "Lynn"}},{"record":{"recordtypeid": "012A0000000gqsVIAQ","lastname": "none","id": "003J0000001aIHFIA2","firstname": "test"}},{"record":{"recordtypeid": "012A0000000AP0HIAW","lastname": "test","id": "003J0000001tHUNIA2","firstname": "dlh"}},{"record":{"recordtypeid": "012A0000000AP0HIAW","lastname": "TestSave","id": "003J0000003Uj0qIAC","firstname": "Eric"}}]
[/quote]
and the call for the table:

[code]
j$("[id$=example]").dataTable( {
"sAjaxSource": '{!testJSON}',
"sAjaxDataProp": "",
"aoColumns": [
{ "sTitle": "One", "mDataProp": "recordtypeid" },
{ "sTitle": "Two","mDataProp": "lastname" },
{"sTitle": "Three", "mDataProp": "id" },
{ "sTitle": "four","mDataProp": "firstname" }
]
});
[/code]

Starz26

FYI, json lint says it is valid...

allan

Can you run your table through the DataTables debugger please ( http://debug.datatables.net ).

Regarding the JSON - when formatted it looks like this:

[code]
[
{
"record": {
"recordtypeid": "012A0000000gqsVIAQ",
"lastname": "test",
"id": "003J0000001rdtoIAA",
"firstname": "test"
}
},
...
[/code]

I think you want it to look like this:

[code]
[
{
"recordtypeid": "012A0000000gqsVIAQ",
"lastname": "test",
"id": "003J0000001rdtoIAA",
"firstname": "test"
},
...
[/code]

(or you could change mDataProp to "record.lastname" etc.

Allan

Starz26

Neat little tool......

code is being sent via pm

allan

Thanks for the link - there was a little hiccup in the debugger when interpreting your data, so that would have broken he formatting if you tried to look at the output before - I've just fixed that, so thanks for that :-)

Regarding the issue - you are trying to load JSON data, as a string to sAjaxSource by the looks of things:

[code]
"sAjaxSource": "{ \"rows\": [{\"row\":{\"record....
[/code]

sAjaxSource is the URL where DataTables should get the data for the table from. So whatever is being assigned to sAjaxSource looks somewhat iffy to me at the moment. Do you actually want to use aaData to pass data into the table? Also you wouldn't want to pass it as a string, but as an array (i.e. no quotes).

Allan

Starz26

Allan,

Honestly, I am new at this part of dataTables. I was able to get it to work on the DOM and now am trying to get it to work by giving it data dynamically so I am open to suggestions...

From what I gather you would like me to:

1. use aaData to pass the data into the table
2. Take ALL of the quotes out of the string
3. remove the top level of the array (records)..

A bit of hand holding please :)

1. data: "[{recordtypeid: 012A0000000gqsVIAQ,lastname:test,id: 003J0000001rdtoIAA,firstname: test}]"

is that what it should look like?

2. initiate datatable:

[code]j$("[id$=example]").dataTable( {
"aaData": THESTRINGABOVE,
"aoColumns": [
{ "sTitle": "One", "mDataProp": "recordtypeid" },
{ "sTitle": "Two","mDataProp": "lastname" },
{"sTitle": "Three", "mDataProp": "id" },
{ "sTitle": "four","mDataProp": "firstname" }
]
});
[/code]

is that correct?