jQuery Girl
  1. jQuery Girl
  3. Comment créer un tableau datatable jquery à partir d’un json standard?
Intereting Posts
jquery $ .post second argument. – json ou chaîne de requête? Problème de case à cocher jQuery – ne pas vérifier s’il est désactivé comment append des caractères à la fin de la valeur si elle existe déjà? JQuery – comment append un object à iframe dans les navigateurs WebKit (chrome / safari)? J’ai besoin de diviser tous les 2 li et les append à un div Asp.net ajax avec mvc2 Activer le bouton d’envoi uniquement lorsque tous les champs sont remplis Attachez le gestionnaire de clics même sur un élément à l’intérieur de l’iframe avec jQuery Evénement JQuery répété dans un contenu dynamic Obtenir la position de la zone de carte (html)? Comment modifier l’heure de fermeture de la notification de bureau HTML5 pour ne pas l’autoclose? Modifier la valeur de la zone de sélection Chosen.js à l’aide de jQuery Animer sur scroll avec jQuery Comment trouver et remplacer des entités HTML avec jQuery? jquery sélection option de

Comment créer un tableau datatable jquery à partir d’un json standard?

Premièrement, je suis un Total jquery / js newbee!
Ensuite, j’ai un long json comme ça: 

[ { "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 devrais-je faire?
Je ne trouve pas de message ici ou ailleurs pour décrire quelque chose comme cela peut-on aider?
MODIFIER
le second tableau est juste une structure que j’ai vue dans l’exemple de datatables . et je veux changer mon json à une structure comme le deuxième tableau
EDIT: dans mon script json, la première partie de chaque donnée créera l’en-tête de colonne de la table qui ira au bas de la seconde structure de tableau et la seconde partie contenant les valeurs ira à la partie supérieure de la seconde structure. et finalement ça devrait ressembler à ça: 

  "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" }, ] ]

Il n’y a pas de moyen magique. Vous devez parcourir votre object d’origine et créer un object au format attendu par datatable.

Supposons que vous vouliez trois colonnes sur votre table

rulesrev, macaddr, lat

Vous pouvez utiliser le code suivant pour générer les données au format requirejs 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 (supporté uniquement par les navigateurs plus Array.map , mais facile de créer un shim). 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 cela devrait vous apprendre à le faire. Voir http://jsfiddle.net/vZVUc/1/ et http://jsfiddle.net/vZVUc/ pour des exemples.