webdivane / table

    BuildRequest: {

        Sort: function (rq, strDesc){

            function sortBySpan(span, i){

                var order = span.innerHTML;

                if(order.length === 1){

                    rq.colNo = i;

                    rq.colOrd = order === strDesc ? "desc" : "asc";

                }

                return rq.colNo === i;

            }

            var thTags = document.getElementById(rq.tableId)

                    .getElementsByTagName("thead")[0]

                    .getElementsByTagName("th");

            var length = thTags.length;

            for(var i = 0; i < length; i++){

                var link = thTags[i].getElementsByTagName("a")[0];

                if(link){

                    var span = link.getElementsByTagName("span")[0];

                    if(span && sortBySpan(span, i)){

                        break;

                    }

                }

            }

        },

        Filter: function (rq){

            function getFilterFieldsByTableID(tableID){

                var fields = {filterBy: null, filter: null};

                var filterDiv = getFilterDivByTableIDOrNull(tableID);

                if(filterDiv !== null){

                    setFilterBy(fields, filterDiv);

                    setFilterValue(fields, filterDiv);

                }

                return fields;

            }

            function getFilterDivByTableIDOrNull(tableID){

                var res = null;

                if(document.getElementById(tableID).parentNode.getElementsByTagName("div").length > 0){

                    for(var i = 0; i < document.getElementById(tableID).parentNode.getElementsByTagName("div").length; i++){

                        if(document.getElementById(tableID).parentNode.getElementsByTagName("div")[i].getAttribute("class") === "filter"){

                            return document.getElementById(tableID).parentNode.getElementsByTagName("div")[i];

                        }

                    }

                }

                return res;

            }

            function setFilterBy(fields, filterDiv){

                var slctObj = filterDiv.getElementsByTagName("select")[0];

                if(slctObj && slctObj.options[slctObj.selectedIndex].value !== "all"){

                    fields.filterBy = slctObj.options[slctObj.selectedIndex].value;

                }

            }

            function setFilterValue(fields, filterDiv){

                var textObj = filterDiv.getElementsByTagName("input")[0];

                if(textObj && textObj.value && textObj.value.length !== 0){

                    fields.filter = encodeURIComponent(textObj.value.trim());

                }

            }

            var r = getFilterFieldsByTableID(rq.tableId);

            if(r.filter !== null){

                rq.filter = r.filter;

            }

            if(r.filterBy !== null){

                rq.filterBy = r.filterBy;

            }

        },

        Run: (function(rq, crntTableId, strDesc){

            rq.tableId = crntTableId;

            TableHelper.BuildRequest.Sort(rq, strDesc);

            TableHelper.BuildRequest.Filter(rq);

        })

    },

    ColumnHover: function(tableContainer, index){

        var rows = document.getElementById(tableContainer).rows;

        var upto = rows.length - 1;

        if(typeof index === "undefined"){

            ColumnHoverRelease(rows, upto);

        } else {

            for(var i = 0; i < upto; i++){

                rows[i].cells[index].setAttribute("lang", "col-hover");

            }

        }

        function ColumnHoverRelease(rows, upto){

            for(var i = 0; i < upto; i++){

                for(var j = 0; j < rows[i].cells.length; j++){

                    if(rows[i].cells[j].lang){

                        rows[i].cells[j].removeAttribute("lang");

                    }

                }

            }

        };

    },

    Draw: {

        Section: function(tableContainer, dt, tSection){

            var section = tSection === "tfoot" ? "tfoot" : "tbody";

            var tSec = document.getElementById(tableContainer)

                        .getElementsByTagName(section)[0];

            Clear(tSec, TableHelper.IePrior(9));

            for(var i = 0; i < dt.length; i++){

                var row = dt[i];

                var tRow = document.createElement("tr");

                Row(row, tRow);

                tSec.appendChild(tRow);

                if(section === "tfoot"){

                    TableHelper.ProcessPaginationLinks(tSec);

                }

            }

            function Clear(tSection, iePrior9){

                if(iePrior9){

                    if(tSection.firstChild){

                        while(tSection.firstChild){

                            tSection.removeChild(tSection.firstChild);

                        }

                    }

                }else{

                    tSection.innerHTML = "";

                }

            }

            function Row(row, tRow){

                for(var cell in row){

                    if(row.hasOwnProperty(cell)){

                        var tCell = document.createElement("td");

                        if(typeof row[cell] === "string" || 

                           typeof row[cell] === "number"

                        ){

                            tCell.innerHTML = row[cell];

                        }else if(typeof row[cell] === "object"){

                            RowCellFromObject(row, cell, tCell);

                        }

                        tRow.appendChild(tCell);

                    }

                }

            }

        Run: function(tableContainer, d, instance){

            this.Section(tableContainer, d.body);

            this.Section(tableContainer, d.footer, "tfoot");

            if(instance.rq !== null){

                var hover = document.getElementById(instance.rq.tableId)

                            .getElementsByTagName("th")[instance.rq.colNo].lang;

                if(hover){

                    instance.ColumnHover(tableContainer, instance.rq.colNo);

                }

            }

        }

    },

    Export: function(lnk, eType, strDesc){

        var request = {};

        var crntTableId = TableHelper.GetParent(lnk, "table").getAttribute("id");

        TableHelper.BuildRequest.Run(request, crntTableId, strDesc);

        request.exportType = ["CSV", "Excel"].indexOf(eType) >= 0 ?

                                        eType : 

                                        "csv";

        window.open(TableHelper.RequestToUrl(request));

        return false;

    },

    Filter: {

        Run: function(field, instance, rq, strDesc){

            var crntTableId = TableHelper.Filter.GetTableId(field);

            if(crntTableId !== null){

                var request = {};

                var exRq = rq;

                TableHelper.BuildRequest.Run(request, crntTableId, strDesc);

                if(exRq === null ||

                    request.filter !== exRq.filter ||

                    request.filterBy !== exRq.filterBy

                ){

                    TableHelper.LoadData.Run(crntTableId, request, instance);

                }

            }

        },

        GetTableId: function(field){

            if(field.tagName.toLowerCase() !== "select"){

                return field.getAttribute("data-table-id");

            }

            var f = field.parentNode.parentNode.getElementsByTagName("input")[0];

            return '' === f.value ? null : f.getAttribute("data-table-id");

        }

    },

    Init: {

        Run: function(tableId){

            var tContainer = document.getElementById(tableId);

            if(!TableHelper.IePrior(9)){

                TableHelper.Init.SetColumnsHoverEffect(tContainer, tableId);

            }

            var tfoot = tContainer.getElementsByTagName("tfoot")[0];

            TableHelper.ProcessPaginationLinks(tfoot);

        },

        SetColumnsHoverEffect: function (tContainer, tableId){

            var tHcells = tContainer.rows[0].cells;

            for(var i = 0; i < tHcells.length; i++){

                if(tHcells[i].firstChild.tagName === "A"){

                    tHcells[i].firstChild.setAttribute("onmouseover", "table.ColumnHover('" + tableId + "'," + i + ");");

                    tHcells[i].firstChild.setAttribute("onmouseout", "table.ColumnHover('" + tableId + "');");

                }

            }

        }

    },

    GoPage: {

        Run: function(lnk, instance, strDesc){

            var request = {};

            var crntTableId = TableHelper.GetParent(lnk, "table").getAttribute("id");

            TableHelper.BuildRequest.Run(request, crntTableId, strDesc);

            request.pageNo = TableHelper.GoPage.GetNo(lnk, crntTableId);

            TableHelper.LoadData.Run(crntTableId, request, instance);

            return false;  

        },

        GetNo: function(lnk, tableId){

            //check & serve pagination jump links

            var jumpDir = lnk.innerHTML.trim().substr(0, 1);

            if(jumpDir === "+" || jumpDir === "-"){

                var current = document.getElementById(tableId)

                                .querySelector("tfoot .paging .a").innerHTML;

                var jump = lnk.innerHTML.replace("K", "000").replace("M", "000000000");

                var jumpPage = (parseInt(current) + parseInt(jump));

                lnk.parentNode.setAttribute("data-page", jumpPage);

                lnk.style.transform = "none";

            }

            return lnk.parentNode.hasAttribute("data-page") ?

                    lnk.parentNode.getAttribute("data-page") :

                    lnk.innerHTML;

        }

    },

    LoadData: {

        tail: null,

        Run: function(tableContainer, rq, instance){

            var tail = TableHelper.LoadData.tail;

            if(tail!==null){ tail.abort();}

            TableHelper.LoadData.SetVisability(tableContainer, false);

            var xmlhttp = window.XMLHttpRequest ? 

                            new XMLHttpRequest() : //IE7+, Firefox, Chrome, Opera, Safari

                            new window.ActiveXObject("Microsoft.XMLHTTP");//IE6, IE5

            xmlhttp.onreadystatechange = function(){

                if(xmlhttp.readyState === 4 && xmlhttp.status === 200){

                    var d = JSON.parse(xmlhttp.responseText);

                    TableHelper.Draw.Run(tableContainer, d, instance);

                    TableHelper.LoadData.SetVisability(tableContainer, true);

                    instance.LoadEndCalback(tableContainer);

                }

            };

            xmlhttp.open("GET", TableHelper.RequestToUrl(rq), true);

            xmlhttp.send();

            TableHelper.LoadData.tail = xmlhttp; //put at tail to can abort later previous request

        },

        SetVisability: function(tableContainer, flag){

            var tbl = document.getElementById(tableContainer);

            if(flag === true){

                tbl.style.filter = "none";

                tbl.style.opacity = "1";

                tbl.style.cursor = "auto";

            }else if(flag === false){

                tbl.style.filter = "blur(1px)";

                tbl.style.opacity = "0.8";

                tbl.style.cursor = "wait";

            }else{

                console.error("table error in the flag value");

            }

        }

    },

    Sort: function(colNo, lnk, instance, strDesc, strAsc){

        var request = {};

        var crntTableId = TableHelper.GetParent(lnk, "table").getAttribute("id");

        TableHelper.BuildRequest.Run(request, crntTableId, strDesc);

        if(Math.round(colNo) === request.colNo){

            request.colOrd = (request.colOrd === "asc" ? "desc" : "asc");

        }else{

            request.colNo = Math.round(colNo);

            request.colOrd = "asc";

        }

        TableHelper.LoadData.Run(crntTableId, request, instance);

        /* Clear and add new sort arrow */

        var headSpans = TableHelper.GetParent(lnk, "thead").getElementsByTagName("span");

        var length = headSpans.length;

        for(var i = 0; i < length; i++){

            headSpans[i].innerHTML = "";

        }

        lnk.getElementsByTagName("span")[0].innerHTML = (request.colOrd === "desc" ? strDesc : strAsc);

    },

    IePrior: function(v){

        var rv = false;

        if(window.navigator.appName === 'Microsoft Internet Explorer'){

            var ua = window.navigator.userAgent;

            var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");

            if(re.exec(ua) !== null){

                rv = parseFloat(RegExp.$1);

            }

            rv = rv < v ? true : false;

        }

        return rv;

    },

    GetParent: function(obj, objType){

        while(obj && obj.tagName !== objType.toUpperCase()){

            obj = obj.parentNode;

        }

        return obj;

    },

    ProcessPaginationLinks: function(tfoot){

        var pLinks = tfoot.querySelectorAll(".paging a");

        if(pLinks.length > 0){

            for(var j = 0; j < pLinks.length; j++){

                pLinks[j].setAttribute("href", "javascript:void(0);");

                pLinks[j].setAttribute("onclick", "return table.GoPage(this);");

            }

        }

    },

    RequestToUrl: function(rq){

        var url = location.pathname + ".json" + location.search;

        if(typeof rq === "object"){

            var getUrlVarName = {

                colNo: "col", colOrd: "ord", filter: "filter",

                filterBy: "filter-by", pageNo: "pg", exportType: "export",

                tableId: "table-id"

            };

            var flagFirst = location.search.length < 1 ? true : false;

            for(var r in rq){

                if(rq.hasOwnProperty(r)){

                    var clue = flagFirst === true ? "?" : "&";

                    url += clue + getUrlVarName[r] + "=" + rq[r];

                    flagFirst = false;

                }

            }

        }

        return url;

    }

};

//https://addyosmani.com/resources/essentialjsdesignpatterns/book/#singletonpatternjavascript

var TableSingleton = (function(){

    // Instance stores a reference to the Singleton

    var instance;

    function initInstance(){

        // Singleton

        // Private methods and variables

        var BuildRequest = TableHelper.BuildRequest.Run;

        var Init = TableHelper.Init.Run;

        function Export(lnk, eType){

            return TableHelper.Export(lnk, eType, this.strDesc);   

        }

        function Filter(field){

            TableHelper.Filter.Run(field, instance, this.rq, this.strDesc);

        }

        function GoPage(lnk){

            TableHelper.GoPage.Run(lnk, instance, this.strDesc);

        }

        var LoadData = TableHelper.LoadData.Run;

        function ReloadData(tableId){

            var request = {};

            BuildRequest(request, tableId, this.strDesc);

            LoadData(tableId, request, instance);

        }

        function Sort(colNo, lnk){

            TableHelper.Sort(colNo, lnk, instance, this.strDesc, this.strAsc);

        }

        return {

            rq: null,

            strAsc: String.fromCharCode(9650), //▲

            strDesc: String.fromCharCode(9660),//▼

            ColumnHover: TableHelper.ColumnHover, //function(tableContainer, index)

            Export: Export,

            Filter: Filter,

            GoPage: GoPage,

            init: Init,

            LoadEndCalback: function(){},/*Allows override: function(tableId){if(tableId){...}}*/

            ReloadData: ReloadData,

            Sort: Sort

        };

    }

    return {

        //Get the Singleton instance if one exists, or create one if it doesn't

        getInstance: function(){

            if(!instance){

                instance = initInstance();

            }

            return instance;

        }

    };

})();

var table = TableSingleton.getInstance();