传递动态JSON数据来创建一个HTML表格

Question

我有一个接收JSON数据的函数，它可以是任意长度并且包含任意数量的列和行数据。

我读过，jqGrid将是一个很好的jQuery插件用于这种情况下，但我不能让它工作。

我有下面的代码，试图去填充我的表：

//This code is in another section of my web page but the data is valid 
//and is populated over a websocket 
var ss = $.parseJSON(data); 
var theGrid = jQuery("#list1")[0]; 
theGrid.addJSONData(ss.NewDataSet.SECURITY_GROUPS); 
//alert(ss.NewDataSet.SECURITY_GROUPS[0].NAME); 

$(document).ready(function() { 
      jQuery("#list1").jqGrid({ 
      datatype: "local", 
      height: 250, 
      multiselect: true, 
      caption: "Manipulating Array Data" 
     }); 
     }); 

<table id="list1"></table> 

Answer 1

也许给DataTables一个尝试，如果jqGrid的是不是为你工作。这可能是我最喜欢的，并且非常容易通过JSON加载，如您所描述的。

以下是如何从一个AJAX源加载：http://datatables.net/release-datatables/examples/data_sources/ajax.html

$(document).ready(function() { 
    $('#example').dataTable({ 
     "bProcessing": true, 
     "sAjaxSource": '../ajax/sources/arrays.txt' 
    }); 
}); 

UPDATE

var columnArr = []; 
var valueArr = []; 
var data = ss.NewDataSet.SECURITY_GROUPS; //data is your SECURITY_GROUPS object 

//Strip the titles off your first array item only since they are all the same. 
$.each(data[0], function(key, value) { 
    columnArr.push({"sTitle" : key}); 
}); 

$.each(data, function(key, value) { 
    var innerArr = []; 
    $.each(value, function(innerKey, innerValue) { 
     innerArr.push(innerValue); 
    }); 
    valueArr.push(innerArr); 
}); 

$('#example').dataTable({ 
    "aaData": valueArr, 
    "aoColumns": columnArr 
});