how to load the local JSON variable using jquery datatable

Question

I have a local JSON dataset. I want to use jquery datatable plugin to display it. Is there any setting or configuration inside datatable plugin to display data? All I can find is to make AJAX calls and server calls.

Thanks for the help.

Did you ever figure this out? I would also like to initialize with a local array of objects passed into aaData. I see that know one understood your question. I tried it with mData properties the way you would with a server side dataset but it didn't work. — Rabbi, Aug 04 '13 at 13:54

jessegavin · Accepted Answer · 2013-08-28T21:48:42.097

19

You can supply DataTables with data 4 different ways

In your situation, you will want to use the second (Javascript Array) option. You will need to be able to translate the shape of your JSON object into an array objects.

Here's an example

var json = {
  BrowserStats : [
    { engine: "Trident", browser: "IE 4.0", platform: "Win 95+", version: 4 },
    { engine: "Trident", browser: "IE 5.0", platform: "Win 95+", version: 5 },
    { engine: "Trident", browser: "IE 5.5", platform: "Win 95+", version: 5.5 }
  ]
};

var data = jQuery.map(json.BrowserStats, function(el, i) {
  return new [el.engine, el.browser, el.platform, el.version];
});

$('#example').dataTable( {
  "aaData": data,
  "aoColumns": [
    { "sTitle": "Engine" },
    { "sTitle": "Browser" },
    { "sTitle": "Platform" },
    { "sTitle": "Version"}
  ]
});

edited Aug 28 '13 at 21:48

answered Oct 03 '11 at 20:46

jessegavin

74,067
28
136
164

I think the equals sign after BrowserStats should be a colon and you prob should delete the trailing comma after the third row. Thanks for your answer. – Upperstage Aug 28 '13 at 20:32
2

Sample code in this answer doesn't work, see [this jsFiddle](https://jsfiddle.net/uvg3qre1/2/). – Gyrocode.com Jul 14 '16 at 16:28
@JigarParekh This answer is almost 6 years ago, the DataTables API has likely changed. Feel free to edit this answer if you find the correct solution. – jessegavin Jul 24 '17 at 13:27

score 1 · Answer 2 · edited May 23 '17 at 10:31

Solving the problem with the jessegavin answer:

$(document).ready(function (){

var json = {
  BrowserStats : [
    { engine: "Trident", browser: "IE 4.0", platform: "Win 95+", version: 4 },
    { engine: "Trident", browser: "IE 5.0", platform: "Win 95+", version: 5 },
    { engine: "Trident", browser: "IE 5.5", platform: "Win 95+", version: 5.5 }
  ]
};

var data = jQuery.map(json.BrowserStats, function(el, i) {
  return [[el.engine, el.browser, el.platform, el.version]];
});

$('#example').dataTable( {
  "aaData": data,
  "aoColumns": [
    { "sTitle": "Engine" },
    { "sTitle": "Browser" },
    { "sTitle": "Platform" },
    { "sTitle": "Version"}
  ]
 });
});

https://jsfiddle.net/byejn8ye/

score 1 · Answer 3 · edited May 23 '17 at 12:34

1

You can get your json local file doing a normal ajax call, with some caveats (see http://en.wikipedia.org/wiki/Same_origin_policy, or jQuery's .getJSON using local files stopped working on Firefox 3.6.13, fwiw)

But it should definitely be possible to do:

$.getJSON('page.json', function(data) {
    /* do something with each item in data */
});

edited May 23 '17 at 12:34

Community

1
1

answered Oct 03 '11 at 20:33

Savino Sguera

3,522
21
20

score 1 · Answer 4 · answered Oct 03 '11 at 20:44

You can set the AjaxSource parameter that points to your DataSet:

$('#example').dataTable( {
    "sAjaxSource": 'dataset.json'
} );

This will load all data once and place them into the DataTable. See more details on the http://www.datatables.net/examples/data_sources/ajax.html.

Jovan

Gyrocode.com · Answer 5 · 2017-05-19T04:13:23.920

Use data option to supply data for a table.

For example:

var table_data = [
    [ "Tiger Nixon", "System Architect", "$3,120", "2011/04/25", "Edinburgh", 5421 ],
    [ "Garrett Winters", "Director", "$8,422", "2011/07/25", "Edinburgh", 8422 ]
];

$('#example').DataTable( {
    data: table_data
} );

If your data is a string in JSON format, you may want to parse it first with either $.parseJSON() or JSON.parse().

See this jsFiddle for code and demonstration.

how to load the local JSON variable using jquery datatable

5 Answers5

Linked