Comment créer un tableau datable jquery avec json standard?

Tout d'abord je suis un jquery/js newbee Total!
Puis-je avoir une longue JSON comme ceci:Comment créer un tableau datable jquery avec json standard?

[ 
{ 
    "rulesrev": 74, 
    "macaddr": "", 
    "lat": "3543.03133N", 
    "ip": "10.128.113.180", 
    "clientname": "D-06-29", 
    "relay0mask": "-1", 
    "relay1stat": "-1", 
    "clientid": 542, 
    "bldname": "D_valiasr_zartosht", 
    "uptime": "", 
    "current": "", 
    "temperature": "", 
    "softver": "", 
    "relay0stat": "0", 
    "volume": "100", 
    "hardver": " ", 
    "relay1mask": "-1", 
    "pic": "", 
    "comment": " p", 
    "lon": "05124.48299E", 
    "rtt": "2012/08/15 23:20:55.0 (load=0.05) (mem=0.11)", 
    "bldaddr": "" 
}, 
{ 
    "rulesrev": 74, 
    "macaddr": "00:10:f3:22:30:08,00:10:f3:22:30:09", 
    "lat": "3537.41356N", 
    "ip": "10.19.64.63", 
    "clientname": "M-19-013", 
    "relay0mask": "-1", 
    "relay1stat": "-1", 
    "clientid": 494, 
    "bldname": "tarebar_m19", 
    "uptime": "19d 20:05:12", 
    "current": "", 
    "temperature": "", 
    "softver": "", 
    "relay0stat": "0", 
    "volume": "100", 
    "hardver": " n", 
    "relay1mask": "-1", 
    "pic": "", 
    "comment": " ", 
    "lon": "05122.94431E", 
    "rtt": "2012/08/25 09:19:25.0 (load=0.05) (mem=0.17)", 
    "bldaddr": "" 
} 
]

et je veux le convertir en un tableau lisible Jquery DataTable qui devrait ressembler à ceci:

"aaData": [ 
      /* Reduced data set */ 
      [ "Trident", "Internet Explorer 4.0", "Win 95+", 4, "X" ], 
      [ "Trident", "Internet Explorer 5.0", "Win 95+", 5, "C" ], 
      [ "Trident", "Internet Explorer 5.5", "Win 95+", 5.5, "A" ], 
      [ "Trident", "Internet Explorer 6.0", "Win 98+", 6, "A" ], 
      [ "Trident", "Internet Explorer 7.0", "Win XP SP2+", 7, "A" ], 
      [ "Gecko", "Firefox 1.5", "Win 98+/OSX.2+", 1.8, "A" ], 
      [ "Gecko", "Firefox 2", "Win 98+/OSX.2+", 1.8, "A" ], 
      [ "Gecko", "Firefox 3", "Win 2k+/OSX.3+", 1.9, "A" ], 
      [ "Webkit", "Safari 1.2", "OSX.3", 125.5, "A" ], 
      [ "Webkit", "Safari 1.3", "OSX.3", 312.8, "A" ], 
      [ "Webkit", "Safari 2.0", "OSX.4+", 419.3, "A" ], 
     [ "Webkit", "Safari 3.0", "OSX.4+", 522.1, "A" ] 
     ], 
     "aoColumns": [ 
      { "sTitle": "Engine" }, 
     { "sTitle": "Browser" }, 
      { "sTitle": "Platform" } 
]

Que dois-je faire?
Je ne trouve pas de poste ici ou ailleurs pour décrire quelque chose comme ça Quelqu'un peut-il aider?
EDIT
le second réseau se trouve une structure i vu dans datatables exemple. et je veux changer mon json à une structure comme le deuxième tableau
EDIT: dans mon json la première partie de chaque données fera l'en-tête de colonne de table qui ira vers le bas de la deuxième structure de tableau et la deuxième partie ce qui est les valeurs va à la partie supérieure de la deuxième structure de tableau. et enfin, il devrait ressembler à ceci:

 "aaData": [ 
[ 74, "", "3543.03133N", "10.128.113.180", "D-06-29", "-1", "-1", 542, "D_valiasr_zartosht", "", "", "", "", "0", "100", "", "-1", "", " p", "05124.48299E", "2012/08/15 23:20:55.0 (load=0.05) (mem=0.11)", ""], 
[ 74, "", "3543.03133N", "10.128.113.180", "D-06-29", "-1", "-1", 542, "D_valiasr_zartosht", "", "", "", "", "0", "100", "", "-1", "", " p", "05124.48299E", "2012/08/15 23:20:55.0 (load=0.05) (mem=0.11)", ""], 
[ 74, "", "3543.03133N", "10.128.113.180", "D-06-29", "-1", "-1", 542, "D_valiasr_zartosht", "", "", "", "", "0", "100", "", "-1", "", " p", "05124.48299E", "2012/08/15 23:20:55.0 (load=0.05) (mem=0.11)", ""], 
[ 74, "", "3543.03133N", "10.128.113.180", "D-06-29", "-1", "-1", 542, "D_valiasr_zartosht", "", "", "", "", "0", "100", "", "-1", "", " p", "05124.48299E", "2012/08/15 23:20:55.0 (load=0.05) (mem=0.11)", ""], 
[ 74, "", "3543.03133N", "10.128.113.180", "D-06-29", "-1", "-1", 542, "D_valiasr_zartosht", "", "", "", "", "0", "100", "", "-1", "", " p", "05124.48299E", "2012/08/15 23:20:55.0 (load=0.05) (mem=0.11)", ""], 
[ 74, "", "3543.03133N", "10.128.113.180", "D-06-29", "-1", "-1", 542, "D_valiasr_zartosht", "", "", "", "", "0", "100", "", "-1", "", " p", "05124.48299E", "2012/08/15 23:20:55.0 (load=0.05) (mem=0.11)", ""], 
[ 74, "", "3543.03133N", "10.128.113.180", "D-06-29", "-1", "-1", 542, "D_valiasr_zartosht", "", "", "", "", "0", "100", "", "-1", "", " p", "05124.48299E", "2012/08/15 23:20:55.0 (load=0.05) (mem=0.11)", ""], 
[ 74, "", "3543.03133N", "10.128.113.180", "D-06-29", "-1", "-1", 542, "D_valiasr_zartosht", "", "", "", "", "0", "100", "", "-1", "", " p", "05124.48299E", "2012/08/15 23:20:55.0 (load=0.05) (mem=0.11)", ""], 
[ 74, "", "3543.03133N", "10.128.113.180", "D-06-29", "-1", "-1", 542, "D_valiasr_zartosht", "", "", "", "", "0", "100", "", "-1", "", " p", "05124.48299E", "2012/08/15 23:20:55.0 (load=0.05) (mem=0.11)", ""], 
[ 74, "", "3543.03133N", "10.128.113.180", "D-06-29", "-1", "-1", 542, "D_valiasr_zartosht", "", "", "", "", "0", "100", "", "-1", "", " p", "05124.48299E", "2012/08/15 23:20:55.0 (load=0.05) (mem=0.11)", ""] 
    ],  "aoColumns": [ 
{ "sTitle": "macaddr" }, 
{ "sTitle": "lat" }, 
{ "sTitle": "ip" }, 
{ "sTitle": "clientname" }, 
{ "sTitle": "relay0mask" }, 
{ "sTitle": "relay0stat" }, 
{ "sTitle": "relay1stat" }, 
{ "sTitle": "clientid" }, 
{ "sTitle": "bldname" }, 
{ "sTitle": "uptime" }, 
{ "sTitle": "current" }, 
{ "sTitle": "temperature" }, 
{ "sTitle": "softver" }, 
{ "sTitle": "volume" }, 
{ "sTitle": "hardver" }, 
{ "sTitle": "relay1mask" }, 
{ "sTitle": "pic" }, 
{ "sTitle": "comment" }, 
{ "sTitle": "lon" }, 
{ "sTitle": "rtt" }, 
{ "sTitle": "bldaddr" }, 
] 
]

Source

2013-01-08 Homam

Veuillez améliorer votre exemple, dans votre JSON initial, il n'y a aucune mention de "Trident" ou "Internet Explorer 4.0". Comment sommes-nous censés savoir d'où viennent ces valeurs? –

Salut @JuanMendes j'ai édité mon poste – Homam

Vous n'expliquez toujours pas comment votre JSON initial mappe au JSON pour les datatables. Par exemple '[{a:" Trident ", b:" IE "}, {a:" WebKit ", b:" Safari "}]' correspondrait à '[[" Trident "," IE "], [" WebKit "," Safari "]]' –

Il n'y a pas de manière magique. Vous devez itérer à travers votre objet d'origine et créer un objet au format attendu par datatable.

Supposons que vous voulez trois colonnes sur votre table

rulesrev, macaddr, lat

Vous pouvez utiliser le code suivant pour générer les données dans le format requis par datatables http://jsfiddle.net/vZVUc/

var originalJson = [{...}]; // Your JSON blob 

// You can't rely on the order of iteration of properties in your JSON object, 
// so you have to specify which fields you want 
var columns = ["rulesrev", "macaddr", "lat"]; 

// If you don't care about the order of properties, you can generate columns 
// using the following 
var columns = []; 
for (var propName in originalJson[0]) { 
    columns.push(propName); 
} 

var dataTableObj = { 
    aaData: [], 
    aoColumns: [] 
}; 

// Stuff the aoColumns array 
for (var i=0; i < columns.length; i++) { 
    dataTableObj.aoColumns.push({sTitle: columns[i]}) 
} 

// Stuff the aaData array 
for (var i=0; i < originalJson.length; i++) { 
    var row = originalJson[i]; 
    var dataTableRow = []; 
    for (var j=0; j < columns.length; j++) { 
     dataTableRow.push(row[columns[j]]); 
    } 
    dataTableObj.aaData.push(dataTableRow); 
} 

// Now you can pass it to your datatable 
$('#example').dataTable(dataTableObj);

Si vous êtes aventureux, vous pouvez utiliser Array.map (pris en charge dans les navigateurs ultérieurs seulement, mais facile à créer une cale pour). http://jsfiddle.net/vZVUc/1/

// You can't rely on the order of iteration of properties in your JSON object, 
// so you have to specify which fields you want 
var columns = ["rulesrev", "macaddr", "lat"]; 

var dataTableObj = { 
    aaData: originalJson.map(function(row) { 
     return columns.map(function(col){ 
      return row[col]; 
     }) 
    }) , 
    aoColumns: columns.map(function(col){ 
     return {sTitle: col} 
    }); 
};

~~Ce n'est pas testé, donc il y a probablement des bugs, mais il devrait vous apprendre à le faire.~~ Voir http://jsfiddle.net/vZVUc/1/ et http://jsfiddle.net/vZVUc/ pour des exemples

Source

2013-01-08 06:54:32

merci beaucoup. cela montre que vous méritez vraiment votre réputation de 18k. Pouvez-vous me présenter quelques sources pour étudier les tableaux et les objets de js? ce sera ton genre. merci encore – Homam

Le meilleur endroit est ici https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/ et https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object Attention, certaines fonctionnalités ne fonctionneront pas dans les anciens navigateurs, mais elles suggèrent des shims pour toutes les nouvelles fonctionnalités. –

Comment créer un tableau datable jquery avec json standard?

Répondre

Questions connexes