crazy4groovy
4/6/2015 - 6:18 PM

demo-list.html

jquery.sortChildren.js
content_copyfile_download
/*!
 * jQuery.sortChildren
 *
 * Version: 1.0.0
 *
 * Author: Rodney Rehm
 * Web: http://rodneyrehm.de/
 * See: http://blog.rodneyrehm.de/archives/14-Sorting-Were-Doing-It-Wrong.html
 *
 * @license
 *   MIT License http://www.opensource.org/licenses/mit-license
 *   GPL v3 http://opensource.org/licenses/GPL-3.0
 *
 */
(function($, undefined){

$.fn.sortChildren = function(map, compare) {
    return this.each(function() {
        var $this = $(this),
            $children = $this.children(),
            _map = [],
            length = $children.length,
            i;
    
        for (i = 0; i < length ; i++) {
            _map.push({
                index: i, 
                value: (map || $.sortChildren.map)($children[i])
            });
        }
                
        _map.sort(compare || $.sortChildren.compare);

        for (i = 0; i < length ; i++) {
            this.appendChild($children[_map[i].index]);
        }
    });
};

$.sortChildren = {
    // default comparison function using String.localeCompare if possible
    compare: function(a, b) {
        if ($.isArray(a.value)) {
            return $.sortChildren.compareList(a.value, b.value);
        }
        return $.sortChildren.compareValues(a.value, b.value);
    },
    
    compareValues: function(a, b) {
        if (typeof a === "string" && "".localeCompare) {
            return a.localeCompare(b);
        }

        return a === b ? 0 : a > b ? 1 : -1;
    },

    // default comparison function for DESC
    reverse: function(a, b) {
        return -1 * $.sortChildren.compare(a, b);
    },

    // default mapping function returning the elements' lower-cased innerTEXT
    map: function(elem) {
        return $(elem).text().toLowerCase();
    },

    // default comparison function for lists (e.g. table columns)
    compareList: function(a, b) {
        var i = 1,
            length = a.length,
            res = $.sortChildren.compareValues(a[0], b[0]);

        while (res === 0 && i < length) {
            res = $.sortChildren.compareValues(a[i], b[i]);
            i++;
        }

        return res;
    }
};

})(jQuery);
demo-table.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>sorting tables</title>

    <script src="/jquery/jquery-1.7.2.min.js"></script>
    <script src="jquery.sortChildren.js"></script>
    <script>
        $(function() {
            
            $('#sortme tbody').sortChildren(function(elem) {
                var t = [];
                $(elem).children().each(function() {
                    t.push($.sortChildren.map(elem));
                });
                return t;
            });
            
        });
    </script>
</head>
<body>
    
    <h1>Sorting a table by multiple columns</h1>
    <table id="sortme">
        <thead>
            <tr><th>One</th><th>Two</th><th>Three</th><th>Four</th></tr>
        </thead>
        <tbody>
            <tr><td>Zulu</td><td>Alpha</td><td>123</td><td>222</td></tr>
            <tr><td>Zulu</td><td>Charlie</td><td>222</td><td>222</td></tr>
            <tr><td>Alpha</td><td>Charlie</td><td>222</td><td>222</td></tr>
            <tr><td>Alpha</td><td>Charlie</td><td>444</td><td>222</td></tr>
            <tr><td>Alpha</td><td>Charlie</td><td>444</td><td>666</td></tr>
            <tr><td>Bravo</td><td>Charlie</td><td>111</td><td>111</td></tr>
            <tr><td>Bravo</td><td>Alpha</td><td>123</td><td>456</td></tr>
        </tbody>
    </table>

</body>
</html>
demo-list.html
content_copyfile_download
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>sorting lists</title>

    <script src="jquery-1.7.2.min.js"></script>
    <script src="jquery.sortChildren.js"></script>
    <script>
        $(function() {
            
            $('#sortme').sortChildren();
            $('#sortme-reverse').sortChildren(null, $.sortChildren.reverse);
            
        });
    </script>
</head>
<body>
    
    <h1>Sorting a list:</h1>
    <ul id="sortme">
        <li>delta</li>
        <li>bravo</li>
        <li>alpha</li>
        <li>charlie</li>
        <li>echo</li>
    </ul>

    <h1>Sorting a list descending:</h1>    
    <ul id="sortme-reverse">
        <li>delta</li>
        <li>bravo</li>
        <li>alpha</li>
        <li>charlie</li>
        <li>echo</li>
    </ul>

</body>
</html>