Advanced HtmlTable / GridView auto sort example

this is an expansion for this
http://bresleveloper.blogspot.co.il/2012/09/easy-sort-html-table-grid-view-using.html

this time i just decided to bring all the code and comment it
example http://jsbin.com/agijer/5/edit

//* @author James Padolsey (http://james.padolsey.com)
http://james.padolsey.com/javascript/sorting-elements-with-jquery/

jQuery.fn.sortElements = (function () {
    var sort = [].sort;
    return function (comparator, getSortable) {
       getSortable = getSortable || function () { return this; };
       var placements = this.map(function () {
            var sortElement = getSortable.call(this),
                  parentNode = sortElement.parentNode,
                  nextSibling = parentNode.insertBefore(
                      document.createTextNode(
''),
                      sortElement.nextSibling
                  );
           
return function () {
                if (parentNode === this) {
                    throw new Error("You can't sort elements if any one is a descendant of another.");
                }
                parentNode.insertBefore(this, nextSibling);

                parentNode.removeChild(nextSibling);
            };
       });
        
       return sort.call(this, comparator).each(function (i) {
             placements[i].call(getSortable.call(this));
       });
    };
})();


//from now on my code


//here i sort the elements by their innerText or date if needed
function MakeTableSortable(tableID) {
     $("#" + tableID + " th").click(function () {
         var index = this.cellIndex;
         if (this.abc == null) { this.abc = true; }
         else { this.abc = !this.abc; }
       

         $("#" + tableID + " tr").sortElements(function (a, b) {
                if (a.cells[0].tagName == "TH" || b.cells[0].tagName == "TH") {
                return 0;
            }

            var _a = a.cells[index].innerText.toLowerCase();
            var _b = b.cells[index].innerText.toLowerCase();

            //test if _a&_b r datetime
            var _da = MakeMyDate(_a);
            if ('Invalid Date' != _da) {
                _a = _da;
                _b = MakeMyDate(_b);
            }


            //test if number
            if (/^\d+$/.test(_a)) {
                _a = parseInt(_a, 10);
                _b = parseInt(_b, 10);
            }
            
            if (!a.parentNode.rows[0].cells[index].abc) {
                if (_a > _b) return -1;
                if (_a < _b) return 1;
                return 0;
            }
            if (_a > _b) return 1;
            if (_a < _b) return -1;
            return 0;
         });
     });


     //this is just from the hand on the TH
     $("#" + tableID + " th").each(function () {
         $(this).hover(function () { $(this).css("cursor", "pointer"); },
            function () { $(this).css("cursor", "auto"); });
     });
}


//this is so that the only thing i need to do is add the js reference
window.onload =
function () {
    var tables = document.getElementsByTagName("table");
    for (var i = 0; i < tables.length; i++) {
       MakeTableSortable(tables[i].id);
    }
}


//but there was a case. p.s. if the table won't sort 2 ways but only 1 it can be cuz the onload works plus u put this so every click sorts it twice
function ManualySetAllTablesSortable() {
    var tables = document.getElementsByTagName("table");
    for (var i = 0; i < tables.length; i++) {
       MakeTableSortable(tables[i].id);
    }
}


//and finally the Date object wouldn't parse right my datetime format, also for some mysterious reason it parsed a month earlier like 09 to Aug, so i had to adjust that, my advice is to test it and/or re-write it as needed
function MakeMyDate(strdate) {
    var yy = strdate.substring(6, 10);
    var MM = strdate.substring(3, 5);
    MM = parseInt(MM, 0) - 1;
    var dd = strdate.substring(0, 2);
    var hh = strdate.substring(11, 13);
    var mm = strdate.substring(14, 16);
    var ss = strdate.substring(17, 19);
    return new Date(yy, MM, dd, hh, mm, ss, 0);
}

GL&HF!

Comments

Popular posts from this blog

OverTheWire[.com] Natas Walkthrough - JUST HINT, NO SPOILERS

Asp.Net Ending Response options, Response.End() vs CompleteRequest()

SOLVED The item could not be indexed successfully because the item failed in the indexing subsystem