DataTables Bootstrap - Dynamic Column Names

Example usage for dynamic column names

by craigvt

HTML

<script src="https://code.jquery.com/jquery-1.12.0.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>
<link rel="stylesheet" href="https://cdn.datatables.net/t/bs/dt-1.10.11/datatables.min.css">
<script src="https://cdn.datatables.net/t/bs/dt-1.10.11/datatables.min.js"></script>
<div class="container">

  <div class="row">
    <div class="col-sm-12">
      <table id="example" class="display table table-striped table-bordered" cellspacing="0" width="100%"></table>
    </div><!-- /col-sm-12 -->
  </div><!-- /row -->

</div><!-- /container -->

CSS

.container {
  margin-top: 30px;
}

JavaScript

var data = [
    [ "Row 1 - Field 1", "Row 1 - Field 2", "Row 1 - Field 3" ],
    [ "Row 2 - Field 1", "Row 2 - Field 2", "Row 2 - Field 3" ],
];
console.log(data);
var columns = [
    { "title":"One" },
    { "title":"Two" }, 
    { "title":"Three" }
];
console.log(columns);
$(document).ready(function() {
  $('#example').DataTable( {
    dom: "Bfrtip",
    data: data,
    columns: columns
  });
});