Showing posts with label Sort HTML Table. Show all posts
Showing posts with label Sort HTML Table. Show all posts

Thursday, 15 November 2012

Sort on Table Columns

Cannot remember if I found this or wrote it or a mix of the 2. I know it uses the JQuery UI Widget tempate so you will need to make sure to include that.


/*
* jQuery UI Progressbar @VERSION
*
* Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
* Dual licensed under the MIT or GPL Version 2 licenses.
* http://jquery.org/license
*
* http://docs.jquery.com/UI/Progressbar
*
* Depends:
*   jquery.ui.core.js
*   jquery.ui.widget.js
*/
(function ($, undefined) {
 
    $.widget("ui.columnsort", {
        version: "@VERSION",
        options: {
 
        },
 
        _create: function () {
            var self = this.element;
            $(self).addClass("sortTable").find("tr:first").addClass("sortColumns").children().addClass("sortColumn")
            .disableSelection().css("cursor""pointer").click(this._sortByColumn);
        },
        _sortByColumn: function () {
            var sortCell = $(this).closest(".sortColumn");
            var selectedIndex = sortCell.index();
            var hadclass = $(sortCell).hasClass("asc");
            $(sortCell).closest(".sortColumns").find(".sortColumn").removeClass("asc").removeClass("desc");
            hadclass ? $(sortCell).addClass("desc") : $(sortCell).addClass("asc");
            var table = $(this).closest("table");
            var rows = $(table).find("tr:not(.sortColumns)");
            rows.sort(function (a, b) {
                var keyA = $('td:eq(' + selectedIndex + ')', a).text();
                var keyB = $('td:eq(' + selectedIndex + ')', b).text();
                var checkkeyA = parseInt(keyA);
                var checkkeyB = parseInt(keyB);
                if (!parseInt(keyA)) {
                    checkkeyA = keyA;
                    checkkeyB = keyB;
                }
                if ($(sortCell).hasClass('asc')) {
                    return (checkkeyA > checkkeyB) ? 1 : -1;
                }
                else {
                    return (checkkeyA < checkkeyB) ? 1 : -1;
                }
            });
 
            rows.each(function (index, row) {
                if ($(row).hasClass("resultstableitema") || $(row).hasClass("resultstableitemb")) {
                    $(row).removeClass("resultstableitema").removeClass("resultstableitemb");
                    if (index % 2) {
                        $(row).addClass("resultstableitemb");
                    }
                    else {
                        $(row).addClass("resultstableitema");
                    }
                }
                table.append(row);
            });
        },
        _destroy: function () {
            this.element
   .removeCss("cursor");
        }
    });
})(jQuery);