Javascript. Sort table

Good day, Habrovchane.

Maybe for most of the local inhabitants, my article will seem too boring and “already understandable,” but I think it will be somewhat useful for beginners.
Somehow the task before me was to sort the table according to different columns. This was taken from the database, each time they pull out - it is expensive, I decided to use JavaScript.
There were some difficulties due to the use of different stylistics of rows in the table, namely there was a different background color, depending on the data of the table itself.
It was impossible to break the style. Anyone interested, please under the cat.


The background illumination is selected as follows:
1) if the time <2012 - red lights
2) if the distance is> 9000 - the backlight is yellow.
*) the rest is the alternation of white with gray.

These talits are taken from the database, php is drawn, the last column is hidden, this time in UNIX-format, it is easier to sort the column “Time”.
')
We connect this class:

var TableSort = function (idTbl, defSortCol, firstRow, classes) { //  ,     ,   0 var curSortCol = defSortCol; //  ,    ,   ,   0 var curImgCol = defSortCol; //    var curSortUp = true; // id ,     var curIdTbl = idTbl; //  ,    ,   0 var numColTr = (firstRow == null) ? 1 : firstRow; //       if (classes == null) { var style = false; } else { var style = true; //  ,    var needClasses = classes[0]; //  ,   var listClasses = classes[1]; } var tbl = document.getElementById(curIdTbl); var allImgs = new Array(); // all imgs-arrow allThs = tbl.getElementsByTagName('tr').item(0).getElementsByTagName('th'); for (i=0; i<allThs.length; i++){ if (allThs.item(i).getElementsByTagName('img') != null) { allImgs[i] = allThs.item(i).getElementsByTagName('img').item(0); } else { allImgs[i] = null; } } var tblData = new Array(); // current data in table //     newCol,     imgCol this.initSort = function (newCol, imgCol) { if (newCol == curSortCol) { //    ,     curSortUp = !curSortUp; } else { //     curSortCol = newCol; curImgCol = (imgCol == null) ? newCol : imgCol; curSortUp = true; } showArrow(); getDataTable(); showSortTable(); if (style) { doStyle(); } }; // show/change arrow function showArrow(){ for (i=0; i<allImgs.length; i++){ if (allImgs[i] != null) { if (i == curImgCol) { allImgs[i].style.visibility = "visible"; if (curSortUp) { allImgs[i].src = "./img/up.png"; } else { allImgs[i].src = "./img/down.png"; } } else { allImgs[i].style.visibility = "hidden"; } } } } // get new data from table function getDataTable() { allTrs = tbl.getElementsByTagName('tr'); for (i=numColTr; i<allTrs.length; i++){ tblData[i-numColTr] = new Array(); for (j=0; j<allTrs[i].getElementsByTagName('td').length; j++) { tblData[i-numColTr][j] = allTrs[i].getElementsByTagName('td').item(j).innerHTML; } if (style) { tblData[i-numColTr][allTrs[i].getElementsByTagName('td').length]=allTrs[i].className; } } tblData.sort(_sort); if (!curSortUp) { tblData.reverse(); } } // rules for sorting function _sort(a1, b1) { var a = a1[curSortCol]; var b = b1[curSortCol]; if (parseFloat(a) && parseFloat(b)) { return parseFloat(a) - parseFloat(b); } else { if (a.toLowerCase() < b.toLowerCase()) { return -1; } else if (a.toLowerCase() > b.toLowerCase()) { return 1; } else { return 0; } } } function showSortTable() { allTrs = tbl.getElementsByTagName('tr'); for (i=numColTr; i<allTrs.length; i++){ for (j=0; j<allTrs[i].getElementsByTagName('td').length; j++) { allTrs[i].getElementsByTagName('td').item(j).innerHTML = tblData[i-numColTr][j]; } if (style) { allTrs[i].className=tblData[i-numColTr][allTrs[i].getElementsByTagName('td').length]; } } } function doStyle(){ allTrs = tbl.getElementsByTagName('tr'); for (i=numColTr; i<allTrs.length; i++){ if (allTrs[i] == null) { continue; } if(needClasses.indexOf(allTrs[i].className) != -1) { continue; } allTrs[i].className = listClasses[(i % listClasses.length)]; } } } 

Create an object like this:

 var infoTblSort = new TableSort("idTbl", 0, 1, [['add', 'edd'],['odd', '']] ); 

To work in the header of the required column, we add something similar to:

 onclick="infoTblSort.initSort(4,3);" 

In this example, 2 parameters are passed, the first is the one that will be sorted (in this case it is a hidden column of UNIX time), the second is the column with a picture indicating the direction of the text.

An example is here .

That's all, I hope my experience will be useful to someone. Please forgiveness for a somewhat confused story, for the first time I am writing an article.
Thanks for attention.