Developer Thought Stream

Anyone that's ever done front-end work has probably worked with jQuery and its awesome DataTables plugin.  You've probably also run up against the limitations of DataTables, namely that it sorts columns based on ALL of the data you put inside the table cells.  In other words, extra characters inside a table cell can confuse the plugin and it may not sort exactly the way you want it to. For example: You'll notice that the balance and payment columns have a dollar sign and the rate column has a percent sign.  Though these characters may not affect the sorting, other characters could because it turns a numeric sort into a text sort.  While we may be okay here, best practice would dictate that we avoid adding any extra characters in our sortable data. In the image above, the dollar signs and percent signs aren't seen by the DOM nor by the DataTables plugin because I am using the CSS :before and :after tags to add them in as a style. Here's the HTML: