cómo cargar la variable JSON local utilizando jquery datatable

Question

Tengo un conjunto de datos JSON local. Quiero usar el plugin jquery datatable para mostrarlo. ¿Hay algún ajuste o configuración dentro del complemento datatable para mostrar los datos? Todo lo que puedo encontrar es hacer llamadas AJAX y llamadas al servidor.

Gracias por la ayuda.

Answer 1

Puede suministrar tablas de datos con datos de 4 formas diferentes

• DOM
• Javascript array
• Ajax source
• Server side processing

En su caso, querrá usar la segunda opción (Arreglo de Javascript). Tendrá que ser capaz de traducir la forma de su objeto JSON en objetos de una matriz.

He aquí un ejemplo

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"} 
    ] 
}); 

Answer 2

Usted puede obtener su archivo local JSON haciendo una llamada ajax normal, con algunas advertencias (ver http://en.wikipedia.org/wiki/Same_origin_policy, o jQuery's .getJSON using local files stopped working on Firefox 3.6.13, fwiw)

Pero sin duda debe ser posible hacer:

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

Answer 3

Usted puede establecer el parámetro AjaxSource que apunta a su conjunto de datos:

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

Esto cargará todos los datos una vez y colocarlos en el DataTable. Ver más detalles en el http://www.datatables.net/examples/data_sources/ajax.html.

Jovan

Answer 4

opción Usar data a facilitar los datos de una tabla.

Por ejemplo:

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 
}); 

Si los datos son una cadena en formato JSON, es posible que desee analizar en primer lugar, ya sea con o $.parseJSON()JSON.parse().

Consulte this jsFiddle para obtener el código y la demostración.

Answer 5

Resolver el problema con el jessegavinanswer:

$(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/