Question

I am using tablesorter with MVC 3 and html helpers to populate columns inside of a for each loop that passes through items in an object. This is working fine, and my html table is being populated the way I want. But I’m having a problem sorting the employee name, which is the second column in the table, which looks like this:

                <td class="reviewedEmployee">
                    @Html.TextBox("Employees", item.FirstName + "  " + item.LastName, new { style = "width:auto !important; text-align:center;" })
                </td>

When I click on the “Employee” title, which is formatted correctly to use table sorter, no sorting happens. But when I click on another column, like “List of Reviewers” (which is an @Html.ListBox from a select list), it sorts by that column. I can click back to the “Employee” title, and it will make changes, but they aren’t alphabetical (first name + last name). Sorting also doesn’t work for the first column, “Year”, which just displays either 2011 or 2012.

Here is my JS:

    $(document).ready(function () {
        $('table.tablesorter').tablesorter({ textExtraction: 'complex' })
          .tablesorterPager({ container: $("#pager"), size: $(".pagesize option:selected").val() });
});

I’ve tried getting rid of spaces in the “Employee” column data and i removed the “textExtaction” property from tablesorter. Any other ideas?

UPDATE: My data in the table are input tags, so I need to find out how to sort by value, possibly by adding a tablesorter.AddParser() method to return the cells .val() inside an input tag.

Answer 1

Instead of using input tags rendered by razor view, I used HTML helpers to get the first and last name from the database, which comes up as Raw text in tables. For some reason, tablesorter couldn’t sort any row that had an input.

Fix: Add a hidden field in the same with the value set as the visible field’s value.

My Fix: After getting Raw Text, I implemented my own custom Parser settings to sort a Column by last name.

    $.tablesorter.addParser({
    id: "lastName",
    is: function (s) {
        return false;
    },
    format: function (s) {
        ret = s.split(' ');
        return ret[ret.length-1]
    },
    type: "text"
});

Also, I added span tags to the raw HTML to give style and other attributes, such as a class that is selected in jQuery to update the table when new data is submitted. See Below:

        //if data is changed, trigger an update on the text boxes to make sure filtering is up to date. 'allocation' is any dynamic field in a row such as textbox
    $(".allocation").change(function () {
        $("#manageReviewsTable").trigger("update");
        $("#manageReviewsTable").trigger("appendCache");
    });

Any questions, comment below!