So I have a site I visit everyday for work. The DataTables 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 TamperMonkey script to remove the horrible DataTable and create one that functions how I need it to.

The DataTable is created via inline Javascript at the end of the document body. I tried the following per the DOCs for the destory() method.

// ==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();

});

It does not "remove those enhancements and return the table to its original un-enhanced state, with the data shown in the table" as stated in the docs. It does not appear to do anything.

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.

Any help is greatly appreciated as this has me banging my head on the desk.