DataTables Anywhere

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…

The future belongs to those of us still willing to get our hands dirty
Ain’t that the truth!

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.

The Matrix Neo Sees
I don’t even see the code anymore. Just tweets and hashtags…

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.

I’m no stranger to JavaScript; I use jQuery regularly (albeit not exclusively), and I’ve used the DataTables plugin in several projects. Hence, using the tools and skills at my disposal, I decided to dynamically modify the table of data I wanted to manipulate using this excellent plugin.

Using the JavaScript console in Chrome – and about half an hour of trial and error – I came up with the snippet I needed. Modify it to suite your needs, and you can do the same thing.

[code language=”javascript”]
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!");
};
};
}
[/code]

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.

It worked the first time

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!

One thought on “DataTables Anywhere”

Leave a Reply

Your email address will not be published. Required fields are marked *