Jeff asked about sortable tables…

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?



  1. k says:

    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.

  2. Brad says:

    Should now be fixed for Chrome, IE, and Safari. I find WordPress difficult to blog code in, as it inserts <br />s and <p>, which apparently are not valid javascript?

    The HTML that is written by the SortableTable instance is like onclick=”showPage( ID, 3 );”. The instance knows its own ID, so it just throws it in there as a parameter?

  3. Jeff says:

    sortable tables are a little different when made with jquery 🙁