Using HTML5 custom data attributes

So far, we've been relying on the content within the table cells to determine the sort order. While we've managed to sort the rows correctly by manipulating that content, we can make our code more efficient by outputting more HTML from the server in the form of HTML5 data-* attributes. The second table in our example page includes these attributes:

<table id="t-2" class="sortable"> <thead> <tr> <th></th> <th data-sort='{"key":"title"}'>Title</th> <th data-sort='{"key":"authors"}'>Author(s)</th> <th data-sort='{"key":"publishedYM"}'>Publish Date</th> <th data-sort='{"key":"price"}'>Price</th> </tr> </thead> <tbody> <tr data-book='{"img":"2862_OS.jpg", "title":"DRUPAL 7","authors":"MERCER DAVID","published":"September ...

Get Learning jQuery - Fourth Edition 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.