How to use a JSON object as the data source
How to use a JSON object as the data source
codecowboy
Posts: 8Questions: 0Answers: 0
Whilst building a prototype, I just want to use a JSON object as my datasource. It is coming from json_encode on a PHP script but I am not making a server side call to fetch data - I am just rendering a template with the JSON object already available in the template as a javascript variable. I have tried this:
[code]
$('#test').dataTable(
{
"aoData":test,
"aoColumns":[{"sTitle":"id"},{ "sTitle":"country_code"},{ "sTitle":"three"},{"sTitle":"four"},{"sTitle":"five"}]
}
);
[/code]
But get 'No data available in table'
The JSON object looks like this:
[code]
[{"id":"58","country_code":"UK","title":"Legal Director","pubdate":"2012-03-08 00:00:00","url":"http://..."},{"id":"59","country_code":"UK","title":"Solutions Architect,","pubdate":"2012-02-23 00:00:00","url":"http://..."},...........]
[/code]
[code]
$('#test').dataTable(
{
"aoData":test,
"aoColumns":[{"sTitle":"id"},{ "sTitle":"country_code"},{ "sTitle":"three"},{"sTitle":"four"},{"sTitle":"five"}]
}
);
[/code]
But get 'No data available in table'
The JSON object looks like this:
[code]
[{"id":"58","country_code":"UK","title":"Legal Director","pubdate":"2012-03-08 00:00:00","url":"http://..."},{"id":"59","country_code":"UK","title":"Solutions Architect,","pubdate":"2012-02-23 00:00:00","url":"http://..."},...........]
[/code]
This discussion has been closed.
Replies
Use mDataProp - not sTitle .
Allan
[code]
id
country code
title
pubdate
url
id
country code
title
pubdate
url
$(function(){
test = '{{ jobsJSON | raw }}'; //raw filter prevents escaping
$('#test').dataTable(
{
"aoData":test,
"aoColumns":[{"mDataProp":"id"},
{ "mDataProp":"country_code"},
{ "mDataProp":"title"},
{"mDataProp":"pubdate"},
{"mDataProp":"url"}]
}
);
});
[/code]
[code]
$(function(){
testdata = $.parseJSON( '{{ jobsJSON | raw }}'); //raw filter prevents escaping
console.log(testdata);
$('#test').dataTable(
{
"aaData":testdata,
"aoColumns":[{"mDataProp":"id"},
{ "mDataProp":"country_code"},
{ "mDataProp":"title"},
{ "mDataProp":"pubdate"},
{ "mDataProp":"url"}]
}
);
});
[/code]
http://datatables.net/blog/Extended_data_source_options_with_DataTables
is speaking of 'mData' only whereas a JSON data source like the sample above and on the page require undocumented(?) 'mDataProp' for the column definition to work properly, else a
"DataTables warning (table id = 'theMatrix'): Requested unknown parameter '0' from the data source for row 0"
is thrown and the table is not rendered.
... having the correct/ed version available as 'JSON' in the 'Data Sources' section of http://datatables.net/examples/ would help a lot for future reference :)
No - mDataProp has been renamed as mData in 1.9.3. It will still work as mDataProp if you pass that in, but mData takes priority if you pass both.
From the mData documentation:
> Note that prior to DataTables 1.9.2 mData was called mDataProp. The name change reflects the flexibility of this property and is consistent with the naming of mRender. If 'mDataProp' is given, then it will still be used by DataTables, as it automatically maps the old name to the new if required.
If you are getting the unknown parameter warning, please refer to this FAQ: http://datatables.net/faqs#unknown_parameter
> ... having the correct/ed version available as 'JSON' in the 'Data Sources' section of http://datatables.net/examples/ would help a lot for future reference
The examples all work correctly, and are fully up to date with the use of mData. For example: http://datatables.net/release-datatables/examples/ajax/objects.html
Allan