Column sorting – client side (Should know)

Add interactivity to your HTML tables by allowing users to sort table columns.

Getting ready

Stick with the table of the top 15 movies that's been used a few times already. Unlike the last recipe, where we started with an empty table body, this time we'll populate all 15 rows.

Getting ready

How to do it...

  1. Start with the same table that was used in the past few recipes. Because columns will be sorted by clicking on the headers, add <a> elements to the table header text. Each <a> element should have a class of sorter and a unique ID, column_n, where n is the number of the column in the table, starting at 0.
    <table border="1" ...

Get Instant jQuery 2.0 Table Manipulation How-to now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.