Sortable table

Sorts a table using a dynamically-chosen column, with support for multiple bodies. http://stackoverflow.com/questions/13376751/sort-table-with-jquery-after-some-tr

by slashingweapon

HTML

<table cellpadding="0" cellspasing="0" class="zebra" id="articles-table">
    <thead>
        <tr>
            <th>Name</th>
            <th class="prcol">Price</th>
        </tr>
    </thead>
    <tbody id="" class="sortable">
        <tr>
            <td>body 1, thing 1</td>
            <td>100</td>
        </tr>
        <tr>
            <td>body 1, thing 2</td>
            <td>299</td>
        </tr>
        <tr>
            <td>body 1, thing 3</td>
            <td>150</td>
        </tr>
    </tbody>
    <tbody class="sortable">
        <tr>
            <td>body 2, thing 1</td>
            <td> not a number </td>
        </tr>
        <tr>
            <td>body 2, thing 2</td>
            <td>420</td>
        </tr>
        <tr>
            <td>body 2, thing 3</td>
            <td>210</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>body 3, thing 1</td>
            <td>31</td>
        </tr>
        <tr>
            <td>body 3, thing 2</td>
            <td>22</td>
        </tr>
        <tr>
            <td>body 3, thing 3</td>
            <td>13</td>
        </tr>
    </tbody>
</table>

CSS

th { font-weight: bold; }
td { width: 100pt; }

JavaScript

$("thead .prcol").each(function(thIdx, sortElem) {
    // find our column index
    var index = $.inArray(sortElem, $(sortElem).closest('tr').children());
    var colSelector = "td:eq(_n_)".replace('_n_', index);

    $(sortElem).closest('table').children('tbody.sortable').each(function(tbIdx) {
        var rows = $(this).children('tr');
        rows.sort(function(left, right) {
            var leftText = $(colSelector, left).text();
            var rightText = $(colSelector, right).text();
            var leftValue = parseFloat(leftText) || 10000;
            var rightValue = parseFloat(rightText) || 10000;
            return  leftValue - rightValue;
        });
        $(this).html(rows);
    });
});