Dynamically Populate jQuery DataTable with JSON data on AJAX request

Dynamically Populate jQuery DataTable with JSON data on AJAX request author(s): Chris Hennighan

by Nayana Das

HTML

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
  <div class="panel">
    
    <table id="example" class="display" cellspacing="0" width="100%">
      <thead>
                              <tr>
                                <th>Humidity</th>
                                <th>Date</th>
                              </tr>
                            </thead>
    </table>
  </div>
</div>

JavaScript

/*var columnArray= [{"data":"month_num", "title":"month_num"}, {"data":"month", "title":"month"}, {"data":"amount", "title":"amount"}, {"data":"cars_out", "title":"cars_out"}, {"data":"cars_in", "title":"cars_in"}];*/
var jsondata = [{"Humidity":2,"Date":"Feb"},{"Humidity":4,"Date":"Mar"}];

$(function() {
  $("#example").DataTable({
  	//columns : columnArray,
    data :jsondata,
  });

});