Have you ever been on Wikipedia – or some other such site – and found a large table of useful information, and become frustrated because you’re unable to do anything useful with the data? For crying out loud, it’s all right there! Why can’t anyone search, sort and otherwise modify the data right in page?
You can! Assuming you don’t mind getting your hands dirty…
Today I found myself – and not for the first time – trying to make sense of a table of data on Wikipedia. A table that would have been easier to make use of if there were some tools on screen to allow me to sort, filter and search through the data. And I found myself frustrated that something so simple hadn’t already been implemented.
So, I took matters into my own hands. My dirty, filthy, hacker hands.
Keep in mind that what you’re about to see is a destructive hack, as it will override the version of jQuery that is on the page and load up a new stylesheet in addition to the DataTables jQuery plugin. Use this power wisely.
var options =
class : "wikitable",
idx : 0,
id : "firstWikiTable"
var dt_options =
paging : false,
scrollY : 400
var jscript = document.createElement("script");
jscript.onload = function ()
var script = document.createElement("script");
script.onload = function ()
var css = document.createElement("link");
css.onload = function ()
var table = $("." + options.class)[options.idx];
options.id = table.id;
var thead = table.createTHead();
var dtable = $("#" + options.id).dataTable(dt_options);
If you find that a bit hard to read here, go look at the gist here.
While it’s designed to work with Wikipedia (hence moving the first row of the tbody into a thead, something required by the DataTable plugin), the overall idea is pretty simple. Load jQuery, load the DataTables plugin, load the DataTables stylesheet, and then apply it to the table of your choosing.
Granted, for all it’s simplicity and elegance, this solution lacks sufficient configurability to be adopted my the masses. Not everyone is comfortable taking a solution like this and modifying it for their specific needs. Not everyone is a programmer. But they should be.
A fun future project would be to release a Chrome plugin that will allow you to select a table on any page (Pinterest-plugin style), and have that table recreated in an overlay using the DataTables plugin (and styled by Bootstrap, of course) and allow you to modify the DataTables plugin settings.
If you’re impatient, write that plugin for me and send me a link to it. I’ll be an adoring fan of your work for a long, long time!