Skip to main content

Fun with CSS :before and :after!

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:


Here's the CSS:


That's it!  You could apply this to any content you want to prepend or append to your columns and it will not affect the way DataTables handles sorting.

Comments

Post a Comment

Popular posts from this blog

jQuery noUIslider Pip Label Customization

Recently, I was tasked with creating a slider element for a user to select their credit rating, of which the user can select from among: 'Poor', 'Fair', 'Good', 'Excellent' and 'Not Sure'.  Several problems presented themselves here: A drop-down box would be better, but that's not what the requirements specified. I already have several numeric sliders on my page and I want them all to match. I selected the jQuery noUi Slider library to create the numeric sliders. noUi Slider does not support string values - only numeric values. The "pips" (slider scale/labels) also does not support string values. Since the solution involved shifting my mindset, I wanted to document it here for future reference and maybe to help someone facing the same requirements. Here's my solution: Since there is really no numeric correlation to credit score (especially considering one of the options is "Not Sure"), I will just u...
Post a Comment
Read more

Regarding Technology (a departure from WebDev)

I'm departing from WebDev for a minute to blog about technology. I'm as guilty of over-indulging in technology as anyone, especially given that my career demands a technology overload. Today at noon is the solar eclipse and that prompted me to think about the past and the future. I started to think about where the world stands and a song came up on my playlist that seemed perfect for my mood. 27 years ago, Bad Religion wrote a song about the current generation of kids. It would be prophetic if it weren't for the fact that the trend had already begun back then. In any event, it seems now is a good time to look back at the lyrics: 'Cause I'm a twenty-first century digital boy I don't know how to live but I got a lot of toys My daddy's a lazy middle-class intellectual My mommy's on Valium, so ineffectual What child these days does not have multiple devices to play with? Gaming systems, television, computers and tablets are in nearly every home. Kid...
Post a Comment
Read more

Salesforce Apex: Replacing and/or Removing Apex Classes

Working with code within the constraints of Salesforce's workflow can be a challenge.  First , you have the restriction on changing anything in production.  Second , you have the requirement for 75% or greater unit test coverage.  Third , you have the fact that certain metadata cannot be pushed to production through a changeset (which means the only way to sync record IDs is by re-deploying the development environment from production). Fourth - and this is what I'd like to blog about today - you cannot delete classes from production through the Salesforce UI .  The only way to delete a class from production is to download the class (and its associated metadata file) into the Eclipse IDE (which you have previously set up with the Apex add-on), change the "status" flag to "Deleted", then deploy the changed metadata file to production.  And (here's the kicker)...sometimes it doesn't work because...reasons. So let's start with the workflow of a f...
Post a Comment
Read more