Back at the beginning of January I blogged about using the {{if}}, {{else}} and {{/if}} tags (you can read that post here) and at that time I was a little stumped as to how to do alternating row formatting.

Maybe it was me being particularly dense on that day or maybe for some reason I thought I should be doing it a particular way but I just could not seem to suss it out.

Well I have finally figured it out today whilst working on my current project and the answer (as always seems to be the way) was right under my nose. Or maybe I am just getting a much better understanding of all things jQuery, javascript and jQuery Templates.

So the effect I was looking for is shown below but unlink my previous post which had 2 templates (one for each row formatting) I obviously just wanted 1 template with some logic to apply the correct css class.

Alternating Rows

Here is the mark-up for the table:

<divid="orders-container"><tableclass="order-list"><thead><tr><th>Order IDth><th>Bank Refth><th>Ordered Onth><th>Shipped Onth><th>Item Totalth><th>Postage Totalth><th>GST Componentth><th>Totalth>tr>thead><tbody><tr><tdcolspan="8"><divclass="loading-animation">div>td>tr>tbody>table>div>

and here is the template for the Rows:

And finally here is the javascript to apply the template:

function LoadOrders() { var url = "/data/ShopService.svc/GetCustomerOrders" $.ajax({ type: "GET", url: url, async: true, contentType: "application/json; charset=utf-8", dataType: "json", success: function (msg) { orders = msg.d; rowId = 0; $(".order-list tbody").children().remove(); $("#order-template").tmpl(orders).appendTo(".order-list tbody"); $("#orders-container").jScrollPane(); $("#order-detail-container").jScrollPane(); if (orders.length > 0) { GetOrderItems(orders[0]["OrderId"]); } $(".order-list tbody tr").click(function () { $(".order-list tbody tr").removeClass("selected"); $(this).addClass("selected"); GetOrderItems($(this).data("orderid")); }); }, error: function (xhr) { returnfalse; } }); }

Now the key to getting the row formatting is in the line “’class=”${GetRowClass()}”’ of the order-template. This makes a call to a following function:

function GetRowClass() { rowId++; var rowClass = rowId % 2 0 ? "even-row" : "odd-row"; if (rowId 1) { rowClass += " selected"; } return rowClass; }

And all this does is increment the variable rowId and then do the usual mod operation on the current rowId to determine which class to use.

Simple when you know how. I think what led me astray initially was using the ${} just for data binding. However, now that I have grasped that it can also be used for executing any javascript function, well the skies the limit really.

For example you will also note that the template it applying formatting to dates and currency values using the following functions:

function FormatCurrency(num) { num = num.toString().replace(/\$|,/g, ''); if (isNaN(num)) num = "0"; sign = (num (num = Math.abs(num))); num = Math.floor(num * 100 + 0.50000000001); cents = num % 100; num = Math.floor(num / 100).toString(); if (cents < 10) cents = "0" + cents; for (var i = 0; i < Math.floor((num.length - (1 + i)) / 3); i++) num = num.substring(0, num.length - (4 * i + 3)) + ',' + num.substring(num.length - (4 * i + 3)); return (((sign) ? '' : '-') + '$' + num + '.' + cents); }


function ConvertJSonDate(date) { if (date null) { return date; } var time = date.replace(/\/Date(([0-9]*))\//, '$1');var date = new Date(); date.setTime(time); return date; } function ShortDate(jsonDate) { return DateFormat(ConvertJSonDate(jsonDate), "dd/mm/yyyy") } function MediumDate(jsonDate) { return DateFormat(ConvertJSonDate(jsonDate), "dd mmm yyyy") } function LongDate(jsonDate) { return DateFormat(ConvertJSonDate(jsonDate), "ddd dd mmm, yyyy | H.MM tt") } function GigDateFormat(jsonDate) { return DateFormat(ConvertJSonDate(jsonDate), "dddd dd mmm yyyy") } function GigTimeFormat(jsonDate) { return DateFormat(ConvertJSonDate(jsonDate), "H.MM tt") } function FormatYear(jsonDate) { return DateFormat(ConvertJSonDate(jsonDate), "yyyy") }

And if you are wondering what that DateFormat function is then take a look at Steve Levithan’s excellent blog post here.

Happy Templating