title: DataTables - Remove DataTables from HTML Table created in different JavaScript File
body: <p>So I have a site I visit everyday for work. The <a href="http://datatables.net/" rel="nofollow">DataTables</a> implementation on this site is atrocious. The DataTable is applied to an HTML table that is generated when the page is rendered and then the DataTable is initialized on it. I figured this is great because I can create a little <code>TamperMonkey</code> script to remove the horrible DataTable and create one that functions how I need it to. </p>
  
  <p>The DataTable is created via inline <code>Javascript</code> at the end of the document <code>body</code>. I tried the following per the <a href="http://datatables.net/reference/api/destroy()" rel="nofollow">DOCs</a> for the <code>destory()</code> method.</p>
  
  <pre><code>// ==UserScript==
  // @name       
  // @version    0.1
  // @description  Makes the Invoice Table more user friendly
  // @include      URL
  // @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
  // @require  http://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.1/js/jquery.dataTables.min.js
  
  // @copyright  2014+, Me
  // ==/UserScript==
  $(function() {
     var t = $('#customer_invoices').DataTable();
     t.destroy();
  
  });
  </code></pre>
  
  <p>It does not "<em>remove those enhancements and return the table to its original un-enhanced state, with the data shown in the table</em>" as stated in the docs. It does not appear to do anything. </p>
  
  <p>I think it is either because the table has not been Datatable initialized yet, or that I am not able to access the original DataTable initialization in a different scope. </p>
  
  <p>Any help is greatly appreciated as this has me banging my head on the desk.</p>