comment charger le local JSON variable à l'aide de jquery datatables

J'ai un local JSON dataset. Je veux utiliser jquery datatables plugin pour l'afficher. Est-il un réglage ou de configuration à l'intérieur de datatable plugin pour afficher des données? Tout ce que je peux trouver est de faire des appels AJAX et des appels au serveur.

Merci pour l'aide.

  • Avez-vous jamais comprendre cela? Je tiens également à initialiser avec un tableau d'objets passés en aaData. Je vois que sais que l'on a compris votre question. Je l'ai essayé avec mData propriétés de la manière que vous le feriez avec un serveur côté dataset mais il ne fonctionne pas.
InformationsquelleAutor prgrmr | 2011-10-03
  1. 18

    Vous pouvez fournir des tables de données avec des données de 4 façons différentes

    Dans votre situation, vous aurez envie d'utiliser le second (Tableau Javascript) option. Vous devrez être capable de traduire à la forme de votre objet JSON dans un tableau d'objets.

    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"}
  ]
});
    • Je pense que le signe égal après BrowserStats devrait être un colon et vous prob devrait supprimer la virgule après la troisième rangée. Merci pour votre réponse.
    • Fait et fait. Bonne prise
    • réponse impressionnante!!
    • Ce sera plus rapide pour environ 100 à 200K de données..
    • Exemple de code dans cette réponse ne fonctionne pas, voir ce jsFiddle.
    • cette solution n'est pas de travail.
    • Cette réponse est près de 6 ans, les tables de données de l'API a probablement changé. N'hésitez pas à modifier cette réponse si vous trouver la bonne solution.
    • Ne fonctionne pas..., dit-el[..] n'est pas un constructeur

    InformationsquelleAutor jessegavin
  2. 1

    Vous pouvez définir la AjaxSource paramètre que les points de votre jeu de données:

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

    Cela va charger toutes les données une seule fois et de les placer dans la DataTable. Voir plus de détails sur la http://www.datatables.net/examples/data_sources/ajax.html.

    Jovan

    InformationsquelleAutor Jovan MSFT
  3. 1

    De résoudre le problème avec le jessegavin réponse:

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

    • Très utile solution.
    InformationsquelleAutor Dmyan
  4. 0

    Vous pouvez obtenir votre json fichier local faire un normal appel ajax, avec quelques mises en garde (voir http://en.wikipedia.org/wiki/Same_origin_policy, ou jQuery .getJSON à l'aide de fichiers locaux cessé de travailler sur Firefox 3.6.13, fwiw)

    Mais il doit certainement être possible de le faire:

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

    Utilisation données 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 est une chaîne de caractères au format JSON, vous pouvez l'analyser d'abord avec soit $.parseJSON() ou JSON.parse().

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

    InformationsquelleAutor Gyrocode.com