首先我是Total jquery / js newbee!
然后我有一个像这样的长json:
[
{
"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": ""
}
]
我希望将它转换为Jquery DataTable可读数组,它应该是这样的:
"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" }
]
我该怎么办?
我在这里或其他地方找不到任何帖子来描述这样的事情
任何人都可以帮忙吗?
的修改
第二个数组只是我在datatables中看到的结构
例。我想把我的json改成像第二个数组的结构
修改
在我的json中,每个数据的第一部分将使表格列标题转到第二个数组结构的底部,第二部分是值转到第二个数组结构顶部。最后它应该是这样的:
"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" },
]
]
答案 0 :(得分:1)
没有神奇的方法。您必须遍历原始对象并以datatable所期望的格式创建对象。
假设你想在桌子上放三列
rulesrev,MACADDR,经纬度
您可以使用以下代码以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 );
如果您喜欢冒险,可以使用Array.map
(仅在以后的浏览器中支持,但很容易创建垫片)。 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}
});
};
这未经过测试,因此可能存在错误,但它应该教您如何操作。 有关示例