web-dev-qa-db-fra.com

comment charger la variable JSON locale à l'aide de jquery datatable

J'ai un jeu de données JSON local. Je veux utiliser jquery datatable plugin pour l'afficher. Existe-t-il un paramètre ou une configuration dans le plugin datatable pour afficher les données? Tout ce que je peux trouver est de faire des appels AJAX et des appels de serveur.

Merci pour l'aide.

jquerydatatables
18
prgrmr

Vous pouvez fournir des DataTables avec des données de 4 manières différentes

Dans votre cas, vous voudrez utiliser la deuxième option (tableau Javascript). Vous devez être capable de traduire la forme de votre objet JSON en un objet tableau.

Voici un exemple

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

Résoudre le problème avec le jessegavinrépondre :

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

1
Dmyan

Vous pouvez définir le paramètre AjaxSource qui pointe vers votre DataSet:

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

Cela chargera toutes les données une fois et les placera dans le DataTable. Voir plus de détails sur http://www.datatables.net/examples/data_sources/ajax.html .

Jovan

1
Jovan MSFT

Vous pouvez obtenir votre fichier local json en faisant un appel ajax normal, avec quelques réserves (voir http://en.wikipedia.org/wiki/Same_Origin_policy ou .getJSON de jQuery à l'aide de fichiers locaux ne fonctionne plus sous Firefox 3.6 .13 , fwiw)

Mais il devrait certainement être possible de faire:

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

Utilisez data option pour fournir les données d'une table.

Par exemple:

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 vos données sont une chaîne au format JSON, vous pouvez d'abord les analyser avec $.parseJSON() ou JSON.parse() .

Voir this jsFiddle pour le code et la démonstration.

0
Gyrocode.com