jQuery DataTables and Currency
By default, the jQuery plugin DataTables does not support currency datatypes. I find this kind of strange. It seems like dollar amounts is something pretty common in tables around the web. Businesses that display pricing information or a site with any type of reporting that includes dollar figures are just some examples. Other table sorting plugins I’ve seen have this by default. Why not this one?
There is, however, a currency sorting plugin posted on the DataTables site that you can easily copy and paste into the page where the table is. I will tell you what that plugin is and how to incorporate it into your table, and one problem you will run into if you’re using the PHP money_format( ) function to format your dollar figures.
Here is the DataTables currency sorting plugin, courtesy of Allan Jardine:
jQuery.fn.dataTableExt.oSort['currency-asc'] = function(a,b) {
/* Remove any commas (assumes that if present all strings will have a fixed number of d.p) */
var x = a == "-" ? 0 : a.replace( /,/g, "" );
var y = b == "-" ? 0 : b.replace( /,/g, "" );
/* Remove the currency sign */
x = x.substring( 1 );
y = y.substring( 1 );
/* Parse and return */
x = parseFloat( x );
y = parseFloat( y );
return x - y;
};
jQuery.fn.dataTableExt.oSort['currency-desc'] = function(a,b) {
/* Remove any commas (assumes that if present all strings will have a fixed number of d.p) */
var x = a == "-" ? 0 : a.replace( /,/g, "" );
var y = b == "-" ? 0 : b.replace( /,/g, "" );
/* Remove the currency sign */
x = x.substring( 1 );
y = y.substring( 1 );
/* Parse and return */
x = parseFloat( x );
y = parseFloat( y );
return y - x;
};
All you have to do is say { “sType”: “currency” } for the column with currency values when you initialize the table, and you’ll have your column sort automatically!
But wait. There is one problem with this script. If you’re using PHP, it’s likely that you’re using the money_format( ) function to format a currency value you got from a database. If this is true, you are going to run into problems using this function.
When money_format( ) transforms your value, it adds a left- or right-justification to it. This causes padding to be placed on one side of the value (depending on which justification you chose; right-justification is the default). When the DataTables currency sorting script grabs this value, it does NOT account for the spacing within the table cell. Therefore, it will never work, unless the value is long enough to make up for the padding (it probably won’t be).
The script will successfully remove any commas in the value, but will not remove the currency symbol with the JavaScript substring method. This is because the first character that will be removed is more than likely a space character.
There is, however, a simple fix to this. All you have to do is add this little snippet of code before the .substring( ) method is called:
jQuery.trim( x );
jQuery.trim( y );
Since we are already using jQuery, you’ll have this function ready to use (it’s built in). Voila! Your currency sorter works.
Google Maps jQuery Plugin
Google Maps is an extremely powerful tool that many websites can find a use for. I’ve come across this jQuery Plugin at Unemployed Developer that will make using Google Maps extremely easy, especially if you like to use jQuery for everything else. I haven’t tried it yet, but I will be doing so soon, and reporting back here how it works.
Creating Your Identity
Creating an identity for yourself is not easy. Coming up with a blog name, deciding what your focus is, determining your audience… it’s all stuff you’ve got to think about when coming up with your identity. I’ve determined that while it’s very important to remember who you’re blogging for, it’s most important to be yourself and to not be afraid to do precisely that. Think about this: is it better for 80% of people to really like you and the other 20% of people to dislike you, or for everybody to think you’re just so-so?
CSS Specificity
Have you ever wondered why certain elements you’re styling with CSS don’t seem to be cooperating with you, though it seems very obvious that you’re changing its style? I actually never knew how this worked until I read a fascinating article today by Smashing Magazine (aren’t those guys phenomenal?) The article can be found here. Not only do they talk about CSS specificity, but they talk about all sorts of CSS selectors, and how to make your stylesheets easy and versatile.
Right now I’m going to talk about CSS specificity. First, a CSS selector is the element or grouping of elements that you’re specifying a style for. For example, #nav > ul is a selector: an unordered list within the element with the ID nav. They can also be more complex; for instance, the first line in a paragraph could be represented by this CSS selector: p:first-line. Each of those is what I’m talking about when I say selector.
Each selector in a stylesheet has a certain rank, or specificity, that is used to determine which have higher priority. I was always under the impression that the last selector written had the highest priority; but it appears to not be case (as I kind of always suspected, since the last selector didn’t always seem to have higher priority).
Selector rankings are represented by a 4-digit number — or rather, 4 1-digit numbers separated by commas: a, b, c, d.
a is used to show an inline style. If there is no inline style for this particular selector, the number is always 0.
b is the number of IDs being used in the selector. An ID is represented by the # symbol followed by the ID attribute of the HTML element.
c is the number of pseudo-classes and attribute selectors. A class is selected using a period, then the class name (.content). An example of an attribute selector is div[id="content"].
d is the number of elements and pseudo-elements in the selector. Elements are any HTML element, including div, a, p, ul, etc. A pseudo-element could be p:first-line or li:last-child.
Here are a few examples of how to calculate these ranks:
div.content — 0, 0, 1, 1
.nav > ul — 0, 0, 1, 1
#sidebar > p.about:first-line — 0, 1, 1, 2
The ranking of elements is easy:
• 0, 0, 1, 1 is higher than 0, 0, 0, 1.
• 0, 2, 1, 1 is higher than 0, 2, 0, 1.
If two selectors with the same target have the same ranking, the last one in the stylesheet will have higher priority. Also, any universal selector (*) will have a specificity of 0.
So pay attention to your selectors and their specificity. It may save you hours of debugging your stylesheets, and the headache of wondering why the style you’re applying to an element isn’t working.
PayPal vs. Google Checkout
Having never integrated either into a website, and being new to building E-Commerce sites, I’m trying to figure out which payment solution is better. Both seem easy enough to integrate into a preexisting shopping cart.
PayPal has a wider variety of options and tools that you can sign up for. Plus, I would guess that it’s a bit more well known for payments, so people may be more inclined to use and trust it. PayPal’s Payment Gateway seems like a very easy way for an online merchant to incorporate it into its online store. Payflow Link takes the user to the PayPal website to complete the transaction. Payflow Pro allows the user to stay entirely on the merchant’s website while checking out, but at a greater cost. There is a one-time setup fee for both in addition to a monthly cost. Also, it costs $0.10 per transaction after the first 500.
Google Checkout has fewer options, but seems to be very straightforward in how it works. You can easily add it to your own custom shopping cart. Depending on the amount of monthly sales your website has, you’ll pay no more than 2.9% of each transaction + $0.30. This might end up being more costly than PayPal.
Not quite sure what the best solution is; I’ll have to do some more research. At this point I’m leaning towards Google Checkout, because I’ve easily found their API documents for custom shopping carts. Have a hard time finding that kind of information for PayPal. Plus, there is no setup fee or monthly fee for Google Checkout.
Link Filtering with DataTables
One thing that I wanted to do with DataTables that I could not find an example for was have a list of links the user could simply click on to narrow the table down to whatever was clicked on. For example, let’s say you have a list of code categories you want your table to be narrowed down by, and the user can click on a link to display only those rows in the table with that category. Your markup would simply look something like this:
<a href="javascript:void(0);" onclick="tableName.fnFilter( 'PHP', 0 );">PHP</a> |
<a href="javascript:void(0);" onclick="tableName.fnFilter( 'JS', 0 );>JavaScript</a> |
<a href="javascript:void(0);" onclick="tableName.fnFilter( 'CSS', 0 );>CSS</a> |
<a href="javascript:void(0);" onclick="tableName.fnFilter( 'ASP.NET', 0 );>ASP.NET</a> |
The onclick function is tableName.fnFilter( SEARCH_TERM , COLUMN_INDEX ). That’s all.
It would end up looking something like this above the table:
PHP | JavaScript | CSS | ASP.NET
Of course, this is a very simple example, and I could probably go into more detail in a later post.
DataTables: A jQuery Table Solution
Tables seem like a simple concept, but we all know that they aren’t. The markup is tedious and styling them can be a headache. In a word, I hate them!! Okay, hate is a strong word. But, I dislike them very, very much. Not as much as I dislike forms, but that’s not what this post is about. Maybe another time.
I’ve been searching for the best table solution, without having to write my own, for some time. We all want to do cool things with our tables, right? A good table should include three very important features:
• Sorting. We want the user to be able to click on a header and have it sort the table by that column. For most tables, this should be a given. In addition, there shouldn’t be a refresh of the page to sort a table by a row. It’s reloading the same information, just in a different order. That’s simply a waste of time.
• Paginating. Pagination is another feature that is definitely needed for large sets of data in a table. But again, there’s no point in refreshing to move from page-to-page.
• Filtering. This is the final important feature that should be used in all large sets of data. I’m not talking about selecting a category from a drop-down and having the page reload, only to display the same table with a few less rows. The table should automatically eliminate rows that don’t meet the criteria of the filter, whether it be from a text field or a drop-down.
If you’re like me, you’ve found it quite difficult to find a table plug-in that features all three (sorting, paginating and filtering) working simultaneously. You’ve had to find different scripts and make them work together and initiate them at different times. Or hack a script some way to get it to work how you want. Not fun.
The simplest, best and fastest solution I’ve found is DataTables, created by Allan Jardine. It is a jQuery plugin, and it supports automatic column sorting, variable length pagination and on-the-fly filtering. Best of all, it’s free, and degrades gracefully with JavaScript disabled. There is so much customization you can do, I don’t even know where to begin. I would strongly recommend taking a look at that page and learning how to use it. It’s very easy to install, and the package conveniently comes with StyleSheets and a copy of the jQuery library.
