come caricare la variabile JSON locale utilizzando jquery datatable

Question

Ho un set di dati JSON locale. Voglio usare il plugin datatable di jquery per visualizzarlo. C'è qualche impostazione o configurazione all'interno del plugin datatable per visualizzare i dati? Tutto quello che posso trovare è fare chiamate AJAX e chiamate al server.

Grazie per l'aiuto.

Answer 1

È possibile fornire DataTable con dati 4 modi diversi

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

Nella tua situazione, ti consigliamo di utilizzare la seconda opzione (Array Javascript). Dovrai essere in grado di tradurre la forma del tuo oggetto JSON in un oggetto array.

Ecco un esempio

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

è possibile ottenere il JSON file locale facendo una normale chiamata ajax, con alcuni avvertimenti (vedi http://en.wikipedia.org/wiki/Same_origin_policy, o jQuery's .getJSON using local files stopped working on Firefox 3.6.13, FWIW)

Ma dovrebbe assolutamente essere possibile fare:

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

Answer 3

È possibile impostare il parametro AjaxSource che punta a DataSet:

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

Questo caricherà tutti i dati una volta e metterli nel DataTable. Vedi maggiori dettagli su http://www.datatables.net/examples/data_sources/ajax.html.

Jovan

Answer 4

Usa data possibilità di fornire i dati per un tavolo.

Ad esempio:

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

Se i dati sono una stringa in formato JSON, si consiglia di analizzare prima con uno o $.parseJSON()JSON.parse().

Vedere this jsFiddle per codice e dimostrazione.

Answer 5

Risolvere il problema con la 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/