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%">
      
    </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 = [{"month_num":2,"month":"Feb","amount":99862,"cars_out":20497,"cars_in":20497},{"month_num":1,"month":"Jan","amount":119760,"cars_out":23994,"cars_in":23994}];

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

});