Sorting tbody elements by column value with jQuery
<p>I am trying to sort a table - so when a user clicks on the table heading, it will sort in ascending/descending order. I've got it to the point where I can sort the table based on the column value. However, I have groupings of table rows (two rows per table body), and I want to sort the columns based on the values in the columns of the first row of each table body, but when it reorders the table, it want it to reorder the table bodies, not the table rows.</p>

<pre><code>&lt;table width="100%" id="my-tasks" class="gen-table"&gt;
&lt;thead&gt;
    &lt;tr&gt;
        &lt;th class="sortable"&gt;&lt;p&gt;Name&lt;/p&gt;&lt;/th&gt;
        &lt;th class="sortable"&gt;&lt;p&gt;Project&lt;/p&gt;&lt;/th&gt;
        &lt;th class="sortable"&gt;&lt;p&gt;Priority&lt;/p&gt;&lt;/th&gt;
        &lt;th class="sortable"&gt;&lt;p&gt;%&lt;/p&gt;&lt;/th&gt;
    &lt;/tr&gt;
&lt;/thead&gt;

&lt;tbody&gt;
&lt;tr class="sortable-row" id="44"&gt;
    &lt;td&gt;&lt;p&gt;dfgdf&lt;/p&gt;&lt;/td&gt;&lt;td&gt;&lt;p&gt;Test&lt;/p&gt;&lt;/td&gt;
    &lt;td&gt;&lt;p&gt;1&lt;/p&gt;&lt;/td&gt;&lt;td&gt;&lt;p&gt;0&lt;/p&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td colspan="3"&gt;&lt;p&gt;asdfds&lt;/p&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;

&lt;tbody&gt;
&lt;tr class="sortable-row" id="43"&gt;
    &lt;td&gt;&lt;p&gt;a&lt;/p&gt;&lt;/td&gt;
    &lt;td&gt;&lt;p&gt;Test&lt;/p&gt;&lt;/td&gt;
    &lt;td&gt;&lt;p&gt;1&lt;/p&gt;&lt;/td&gt;
    &lt;td&gt;&lt;p&gt;11&lt;/p&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td colspan="3"&gt;&lt;p&gt;asdf&lt;/p&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;

&lt;tbody&gt;
&lt;tr class="sortable-row" id="40"&gt;
    &lt;td&gt;&lt;p&gt;Filter Tasks&lt;/p&gt;&lt;/td&gt;
    &lt;td&gt;&lt;p&gt;Propel&lt;/p&gt;&lt;/td&gt;
    &lt;td&gt;&lt;p&gt;10&lt;/p&gt;&lt;/td&gt;
    &lt;td&gt;&lt;p&gt;10&lt;/p&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
    &lt;td&gt;&lt;/td&gt;
    &lt;td colspan="3"&gt;&lt;p&gt;Add a button to filter tasks.&lt;/p&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p>With the following javascript:</p>

<pre><code>jQuery(document).ready(function () {
    jQuery('thead th').each(function(column) {
        jQuery(this).addClass('sortable').click(function() {

            var findSortKey = function($cell) {
                return $cell.find('.sort-key').text().toUpperCase() + ' ' + $cell.text().toUpperCase();
            };
            var sortDirection = jQuery(this).is('.sorted-asc') ? -1 : 1;

            var $rows = jQuery(this).parent().parent().parent().find('.sortable-row').get();
            jQuery.each($rows, function(index, row) {
                row.sortKey = findSortKey(jQuery(row).children('td').eq(column));
            });

            $rows.sort(function(a, b) {
                if (a.sortKey &lt; b.sortKey) return -sortDirection;
                if (a.sortKey &gt; b.sortKey) return sortDirection;
                return 0;
            });

            jQuery.each($rows, function(index, row) {
                jQuery('#propel-my-tasks').append(row);
                row.sortKey = null;
            });

            jQuery('th').removeClass('sorted-asc sorted-desc');
            var $sortHead = jQuery('th').filter(':nth-child(' + (column + 1) + ')');
            sortDirection == 1 ? $sortHead.addClass('sorted-asc') : $sortHead.addClass('sorted-desc');

            jQuery('td').removeClass('sorted').filter(':nth-child(' + (column + 1) + ')').addClass('sorted');

        });
    });
});
</code></pre>
