Base jQuery DataTables Fiddle

Partially initialized table

HTML

<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">
<div class="buttons">
  <button id="build">Build Table</button>
  <button id="delete">Delete</button>
</div>
<div class="error-msg">
</div>
<div class="wrapper">
  <label>breno</label>
  <table id="table"></table>
</div>

CSS

.buttons {
  margin-bottom: 20px;
}

button {
  display: inline-block;
  margin-right: 10px;
}

.error-msg {
  font-family: Mono;
  color: red;
}

JavaScript

$(document).ready(function() {
  
  $("#build").on('click', function() {
    
    var rows = [{
      name: 'Steve',
      age: '3',
      office: 'SF'
    }, {
      name: 'Anne',
      age: '7',
      office: 'LA'
    }, {
      name: 'Sarah',
      age: '1',
      office: 'Tokyo'
    }];
    
    var cols = [{
      title: 'Name',
      data: 'name'
    }, {
      title: 'Age',
      data: 'age'
    }, {
      title: 'Office',
      data: 'office'
    }];

    try {
    
      var tableAPI = $('.wrapper').empty().append('<table></table>').find('table').DataTable({
        order: [
          [7, 'desc'] // this column doesn't exist. will get error.
        ],
        columns: cols,
        data: rows
      });
      
    } catch (e) {
      $(".error-msg").html(e);
    }
    
  });

  $("#delete").on('click', function() {
    try {
      $('.wrapper').find('table').DataTable().destroy(true);
    } catch (e) {
      $(".error-msg").html(e);
    }
  })
});