And how I would do one with Javascript.. so I did. Here’s a list of some books I’ve read semi-recently. The scores are not super well-considered.

show 4 per page
show all

You can have more than one per page, and it’s easy to add them. This line of code will do it:

var table = new SortableData( data, headings, settings );

• data is a list of data objects. Each object corresponds directly to a row in the table. An example of the data object:
  { author: 'Alastair Reynold', score: 8, book: 'Chasm City' }
• headings is an array of data objects. Each describes a column of the table. An example of a heading data object:
  { key: 'author', value: 'Author', type: 'String' }
• settings is an object whose values are used to overwrite the SortableData object’s defaults. You can specify fields like page_size, and page. An example of a settings object:
  { page_size: 5 }

The SortableData.js file must be included, as it describes the object.

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?