如何使用JSON数组填充数据表？

Question

I need to populate a datatable using JSON Array. In which first element is the table header and rest are table datas.

I used innerHTML to populate the table. It works and the table displays. But If I used this method the DataTable properties are lost like Fixed headers and columns .

I don't know how to populate the DataTable with JSON Array without losing the DataTable property.

My HTML page is

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

My JSON is

[{"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

You can get the JSON and split it into columnsDefs and values using the below loops!

 $(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]){ if(columnDefs.indexOf(k) === -1){ columnDefs.push({title: dataSet[0][k]}); } } //loop for populating data var data = []; for(let j of dataSet){ var arr = []; 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 }); }); 

 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>