Simple use of the JQuery TableSorter

I have had quite a few web pages recently that could use a little love in the display of large tables of data.  For one, we wanted paging and sorting of the columns.  This is a common problem, and the JQuery TableSorter makes easy work of doing this on your front end.  Here is what you need to do to make it work.

1. The first thing to do is include the correct JQuery files.  I did this using the Scripts.Render function in MVC.


@Scripts.Render("~/Scripts/jquery.js")
@Scripts.Render("~/Scripts/jquery.tablesorter.js")
@Scripts.Render("~/Scripts/jquery.tablesorter.pager.js")
2. Next, you must give the table containing your results a good name, I used tablesorter as the class name of the table to index from.

<table class="tablesorter" width="100%">

3. Next, make sure the header row is wrapped in a thead tag and each of the header row cells is a th, not a td.

4. Finally, after the table, put the following code in place.  Its a new div that will be the pager for paging and some javascript to set up the table and render it correctly.  I also added a section that does mouse over highlighting of rows since alternating row text isn't available through this technique, or at least that I could find.

<div id="pager">
        <form>
            <img src="@Url.Content("~/Content/images/first.png")" class="first" />
            <img src="@Url.Content("~/Content/images/prev.png")" class="prev" />
            <input type="text" class="pagedisplay" />
            <img src="@Url.Content("~/Content/images/next.png")" class="next" />
            <img src="@Url.Content("~/Content/images/last.png")" class="last" />
            <select class="pagesize">
                <option selected="selected" value="20">20</option>
                <option value="40">40</option>
                <option value="80">80</option>
                <option value="160">160</option>
            </select>
        </form>
    </div>
    </div>
<script type="text/javascript">
    $(function () {
        $("table.tablesorter").tablesorter({ widthFixed: true, sortList: [[0, 0]] })
        .tablesorterPager({ container: $("#pager"), size: $(".pagesize option:selected").val() });
    });
    $('td').mouseover(function () {
        $(this).siblings().css('background-color', '#EAD575');
        $(this).css('background-color', '#EAD575');
    });
    $('td').mouseleave(function () {
        $(this).siblings().css('background-color', '');
        $(this).css('background-color', '');
    });
</script>

Pentaho Salesforce Foreign Key Loading

I was tasked with loading data into SalesForce from Pentaho.  There is a built in upsert command to do this, so it should be easy.  And for the most part it was, however, one issue that I came across is using external keys for linking objects in salesforce.  You can simply load values with the upsert, but if you are referencing another object by a key, it isn't straight forward or built well into the UI.  What needs to be done is almost an xslt type reference to the key of the other object.  

In my case, I had loaded all the accounts and needed to load orders.  The orders referenced the account by Account Number, which was a key on our custom account object in Sales Force.  After much trial and error, I was forced to do the following to tie the two together.


In the Module Field (Sales Force Field) I had to reference the object (Account) followed by a colon and then Acct_Number_C/Client_Account_R which the first half is the field on account and after the / is the field on the order object.  Once you do that, the objects are inserted and tied together correctly.

Enjoy!