web-dev-qa-db-fra.com

Comment puis-je utiliser un objet JSON local comme source de données pour jQuery DataTables

J'ai un objet JSON local formaté comme ceci:

[{
    "id": "58",
    "country_code": "UK",
    "title": "Legal Director",
    "pubdate": "2012-03-08 00:00:00",
    "url": "http://..."
},{
    "id": "59",
    "country_code": "UK",
    "title": "Solutions Architect,",
    "pubdate": "2012-02-23 00:00:00",
    "url": "http://..."
},{
    // ....more of the same......
}]

Je voudrais définir cela comme source de données pour un jQuery datatable et j'ai essayé ceci:

testdata = '{{ jobsJSON | raw }}'; //twig template tag
console.log(testdata);
$('#test').dataTable({
    "aoData": testdata,
    "aoColumns": [
        { "mDataProp": "id" },
        { "mDataProp": "country_code" },
        { "mDataProp": "title" },
        { "mDataProp": "pubdate" },
        { "mDataProp": "url" }
    ]
});

Le plugin DataTables se charge et tente de dessiner le tableau mais donne l'erreur "Aucune donnée disponible dans le tableau"

Je ne fais pas d'appel AJAX et je veux juste accéder à l'objet JSON à partir d'une variable JS locale.

jqueryjsondatatables
20
codecowboy

La propriété pour fournir vos propres données est aaData PAS aoData:

testdata = [{"id":"58",...}]; // local object

$('#test').dataTable({
    "aaData": testdata,
    "aoColumns": [
        { "mDataProp": "id" },
        { "mDataProp": "country_code" },
        { "mDataProp": "title" },
        { "mDataProp": "pubdate" },
        { "mDataProp": "url" }
    ]
});

Violon de travail

41
Rory McCrossan

J'ai rencontré le même problème, la solution est comme ceci: Placer le code $('#list_table').dataTable dans la fonction setTimeout pour reporter l'application dataTable pendant 5 secondes:

setTimeout("$('#list_table').dataTable ...." , 5000);

J'ai remarqué qu'appliquer le plugin dataTable dans firebug après le chargement de la table, il n'affiche pas d'erreur comme "Aucune donnée disponible dans la table".

1
Kenji