So for each table we instantiate a new SortableData object. That guy takes care of writing and updating HTML, and the paging. But how do we reference the object for the necessary onclick events (clicking a heading to sort by a column, or a page link to view that page)? I chose to maintain a static instances array within SortableData. On instantiation, each object assigns itself a unique ID, and adds itself to the instance array.
Static SortableData functions handle the click events. Each function takes, as one of its parameters, a SortableData instance ID and calls the appropriate functions on the instance with that ID. And it even works! First try, in fact!

Then some CSS to style the HTML outputted, and that’s it! We’re done.

It’d be easy to write a wrapper object that loads data via AJAX, ideally receiving appropriately formatted JSON, but I am pretty lazy. And really, what use do I have for a sortable table?

Comments

The examples don’t seem to work for me in chrome? I just see two links and clicking them doesn’t work =(

That sounds like a good solution to finding the JS obj from a DOM click? But how do you tell the DOM click handler which static id it’s associated with?

I probably would have added a reference to the js obj to the dom node, which apparently causes memory leaks (who knew?), or instantiated separate instances of each event handler with an attached reference for each js obj, which is a lot of memory used on event handler instances.