Skip to content

Instantly share code, notes, and snippets.

@scottoffen
Last active November 19, 2016 22:15
Show Gist options
  • Star 2 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save scottoffen/5bee51d77092576281fa to your computer and use it in GitHub Desktop.
Save scottoffen/5bee51d77092576281fa to your computer and use it in GitHub Desktop.
Apply the DataTables jQuery plugin to any table on a website
var options = { class : "wikitable", idx : 0, id : "firstWikiTable" };
var dt_options = { paging: false, scrollY: 400 };
var jscript = document.createElement("script"); jscript.src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"; document.body.appendChild(jscript);
jscript.onload = function ()
{
var script = document.createElement("script"); script.src="https://cdn.datatables.net/1.10.6/js/jquery.dataTables.min.js"; document.body.appendChild(script);
script.onload = function ()
{
var css = document.createElement("link"); css.rel="stylesheet"; css.href="https://cdn.datatables.net/1.10.6/css/jquery.dataTables.min.css"; document.body.appendChild(css);
css.onload = function ()
{
var table = $("." + options.class)[options.idx];
if (table.id)
{
options.id = table.id;
}
else
{
table.setAttribute("id", options.id);
}
var thead = table.createTHead();
thead.appendChild($(table).find("tbody tr:first-child")[0]);
var dtable = $("#" + options.id).dataTable(dt_options);
console.log("BAM!");
};
};
};
@scottoffen
Copy link
Author

Be aware that this is a potentially destructive hack as it injects jQuery 2.1.3 and and the DataTables 1.10.6 javascript and stylesheet to the page, even if they are already there.

The dt_options variable sets the options for creating the datatable.

The options variable hold a few useful variables in one place:

Variable Usage
class The css class of the table
idx Which element in the returned set of tables you want to alter
id The id to add to the table if the table doesn't already have an id

@donpayne
Copy link

Scott you are my hero!!!!

@donpayne
Copy link

I still think you need to make this available as a Pintrest-ish style Chrome Extension!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment