title: DataTables - Update column headers and then re-draw
body: <p>I want to be able to update the column header via jquery for a datatable.  The table will be empty (apart from the header), and the column titles will change based on used input.  I'm using datatables 1.10.9.</p>
  
  <p>Create the datatable.</p>
  
  <pre><code>    $('#tbl1').dataTable({
            "autoWidth":false
          , "info":false
          , "JQueryUI":true
          , "ordering":true
          , "paging":false
          , "scrollY":"470px"
          , "scrollX":"1485px"
          , "scrollCollapse":true
          , "columnDefs": [
                      { className: "LeftNoWrap", "targets": [ 0,1 ] }
                  ,   { className: "CenterNoWrap", "targets": [ 2,3 ] }
                  ,   { className: "RightNoWrap", "targets": [ 4,5,6,7,8,9,10,11,12,13 ] }
              ]
      });
  </code></pre>
  
  <p>Create local variable.</p>
  
  <pre><code>    var dTable = $('#tbl1').DataTable();
  </code></pre>
  
  <p>Update a column title.</p>
  
  <pre><code>    $(dTable.column(1).header()).text('My title');
  </code></pre>
  
  <p>Load the data.</p>
  
  <pre><code>    for (var i = 0; i &lt; Data.length; i++) {
          .....
      }
      dTable.draw();
  </code></pre>
  
  <p>However, the columns now don't line up.  </p>