동적 JSON 데이터를 전달하여 HTML 테이블 만들기

Question

JSON 데이터를 수신하는 함수가 있습니다. 길이는 얼마든지 가능하며 데이터의 열과 행의 개수는 제한이 없습니다.

jqGrid가이 시나리오에 사용할 좋은 jQuery 플러그인이 될 것이라고 읽었지만 제대로 작동하지 않습니다. 있는 jqGrid 당신을 위해 작동하지 않는 경우

//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 시도해 :

나는 시도하고 내 테이블이 채워 갈 수있는 다음과 같은 코드가 있습니다. JSON을 통해로드하는 것은 내가 좋아하는 것일 뿐더러 매우 쉽습니다. ;`서에 포함될 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 
});