JSON配列を使用してdatatableを生成する方法は？

Question

JSON Arrayを使用してデータテーブルを作成する必要があります。最初の要素は表のヘッダーで、残りは表のデータです。

innerHTMLを使用して表にデータを入力しました。それが動作し、テーブルが表示されます。しかし、私がこの方法を使用した場合、DataTableのプロパティはFixed headers and columnsのように失われます。

DataTableをJSON Arrayに設定する方法を知りませんが、DataTableプロパティを失うことはありません。

私のHTMLページは

ある

<div class="table-responsive"> 
     <table id="reportTable" class="table table-bordered table-striped" width="100%" cellspacing="0"> 
     </table> 
    </div> 

私のJSONがある

[{"c1":" ", "c2":"27/09", "c3":"26/09", "c4":"25/09", "c5":"24/09", "c6":"23/09", "c7":"22/09", "c8":"21/09", "c9":"20/09", "c10":"19/09", "c11":"18/09", "c12":"17/09", "c13":"16/09", "c14":"15/09", "c15":"14/09", "c16":"13/09", "c17":"12/09", "c18":"11/09", "c19":"10/09", "c20":"09/09", "c21":"08/09", "c22":"07/09", "c23":"06/09", "c24":"05/09", "c25":"04/09", "c26":"03/09", "c27":"02/09", "c28":"01/09", "c29":"31/08", "c30":"30/08", "c31":"29/08", "c32":"28/08", "c33":"Total"},{"c1":"TN36 AT 6622 ", "c2":"138.845", "c3":"11.5641", "c4":"2.73366", "c5":"547.84", "c6":"664.869", "c7":"458.4", "c8":"266.523", "c9":"144.365", "c10":"490.909", "c11":"709.604", "c12":"826.691", "c13":"524.266", "c14":"295.521", "c15":"1.15204", "c16":"0.425419", "c17":"0.43159", "c18":"0.391871", "c19":"300.124", "c20":"827.301", "c21":"780.874", "c22":"792.399", "c23":"67.4738", "c24":"300.649", "c25":"723.796", "c26":"855.125", "c27":"624.249", "c28":"172.467", "c29":"301.822", "c30":"497.332", "c31":"839.875", "c32":"705.905", "c33":"12873.92348"},{"c1":"TN36 AT 8743", "c2":"75.7291", "c3":"0", "c4":"54.24", "c5":"592.651", "c6":"694.377", "c7":"191.25", "c8":"3.19099", "c9":"504.844", "c10":"442.787", "c11":"214.88", "c12":"438.748", "c13":"502.649", "c14":"758.813", "c15":"986.827", "c16":"682.07", "c17":"232.872", "c18":"0.172057", "c19":"0", "c20":"0.492649", "c21":"913.408", "c22":"817.298", "c23":"898.346", "c24":"282.532", "c25":"568.261", "c26":"349.548", "c27":"477.219", "c28":"622.999", "c29":"1086.51", "c30":"707.454", "c31":"295.161", "c32":"0", "c33":"13395.328796"},{"c1":"TN36 AR 1146", "c2":"0", "c3":"475.559", "c4":"412.424", "c5":"626.597", "c6":"670.054", "c7":"192.42", "c8":"3.06767", "c9":"507.76", "c10":"448.085", "c11":"159.722", "c12":"86.188", "c13":"286.528", "c14":"315.573", "c15":"435.126", "c16":"161.092", "c17":"521.155", "c18":"784.174", "c19":"759.443", "c20":"440.643", "c21":"0", "c22":"270.703", "c23":"733.449", "c24":"735.629", "c25":"672.277", "c26":"499.787", "c27":"555.459", "c28":"462.563", "c29":"376.202", "c30":"629.249", "c31":"882.722", "c32":"841.416", "c33":"13945.06667"}] 

Answer 1

あなたはJSONを取得し、下記のループを使用してcolumnsDefsとvaluesに分割することができます！

$(document).ready(function() { 
 

 
    var dataSet = [{"c1":" ", "c2":"27/09", "c3":"26/09", "c4":"25/09", "c5":"24/09", "c6":"23/09", "c7":"22/09", "c8":"21/09", "c9":"20/09", "c10":"19/09", "c11":"18/09", "c12":"17/09", "c13":"16/09", "c14":"15/09", "c15":"14/09", "c16":"13/09", "c17":"12/09", "c18":"11/09", "c19":"10/09", "c20":"09/09", "c21":"08/09", "c22":"07/09", "c23":"06/09", "c24":"05/09", "c25":"04/09", "c26":"03/09", "c27":"02/09", "c28":"01/09", "c29":"31/08", "c30":"30/08", "c31":"29/08", "c32":"28/08", "c33":"Total"},{"c1":"TN36 AT 6622 ", "c2":"138.845", "c3":"11.5641", "c4":"2.73366", "c5":"547.84", "c6":"664.869", "c7":"458.4", "c8":"266.523", "c9":"144.365", "c10":"490.909", "c11":"709.604", "c12":"826.691", "c13":"524.266", "c14":"295.521", "c15":"1.15204", "c16":"0.425419", "c17":"0.43159", "c18":"0.391871", "c19":"300.124", "c20":"827.301", "c21":"780.874", "c22":"792.399", "c23":"67.4738", "c24":"300.649", "c25":"723.796", "c26":"855.125", "c27":"624.249", "c28":"172.467", "c29":"301.822", "c30":"497.332", "c31":"839.875", "c32":"705.905", "c33":"12873.92348"},{"c1":"TN36 AT 8743", "c2":"75.7291", "c3":"0", "c4":"54.24", "c5":"592.651", "c6":"694.377", "c7":"191.25", "c8":"3.19099", "c9":"504.844", "c10":"442.787", "c11":"214.88", "c12":"438.748", "c13":"502.649", "c14":"758.813", "c15":"986.827", "c16":"682.07", "c17":"232.872", "c18":"0.172057", "c19":"0", "c20":"0.492649", "c21":"913.408", "c22":"817.298", "c23":"898.346", "c24":"282.532", "c25":"568.261", "c26":"349.548", "c27":"477.219", "c28":"622.999", "c29":"1086.51", "c30":"707.454", "c31":"295.161", "c32":"0", "c33":"13395.328796"},{"c1":"TN36 AR 1146", "c2":"0", "c3":"475.559", "c4":"412.424", "c5":"626.597", "c6":"670.054", "c7":"192.42", "c8":"3.06767", "c9":"507.76", "c10":"448.085", "c11":"159.722", "c12":"86.188", "c13":"286.528", "c14":"315.573", "c15":"435.126", "c16":"161.092", "c17":"521.155", "c18":"784.174", "c19":"759.443", "c20":"440.643", "c21":"0", "c22":"270.703", "c23":"733.449", "c24":"735.629", "c25":"672.277", "c26":"499.787", "c27":"555.459", "c28":"462.563", "c29":"376.202", "c30":"629.249", "c31":"882.722", "c32":"841.416", "c33":"13945.06667"}]; 
 

 
var columnDefs = []; 
 
//loop for populating column defs 
 
for(let k in dataSet[0]){ 
 
\t if(columnDefs.indexOf(k) === -1){ 
 
    \t columnDefs.push({title: dataSet[0][k]}); 
 
    } 
 
} 
 
//loop for populating data 
 
var data = []; 
 
for(let j of dataSet){ 
 
\t var arr = []; 
 
\t for(let k in j){ 
 
    if(columnDefs.indexOf(k) === -1){ 
 
     arr.push(j[k]); 
 
    } 
 
    } 
 
    data.push(arr); 
 
} 
 

 

 
    var myTable; 
 

 
    myTable = $('#reportTable').DataTable({ 
 
    "sPaginationType": "full_numbers", 
 
    data: data, 
 
    columns: columnDefs 
 
\t }); 
 
});

table.dataTable tbody>tr.selected, 
 
table.dataTable tbody>tr>.selected { 
 
    background-color: #A2D3F6; 
 
} 
 

 
#reportTable * { 
 
    white-space: nowrap; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script> 
 
<link href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <table cellspacing="0" class="dataTable table table-striped" id="reportTable"> 
 

 
    </table> 
 
</div>