№ | Имя | Возраст | Сколько пар обуви |
1 | Дима | 35 | 12 |
2 | Ира | 35 | 20 |
3 | Саша | 4 | 15 |
4 | Миша | 1 | 10 |
5 | Женя | 0 | 4 |
У таблицы должен быть thead и должна быть левая колонка c номерами. По ней дополнительно сортируется, если у ячеек одинаковые значения.
Сортируется первый tbody, ячейки из thead не участвуют в сортировке.
Код работает в браузерах-динозаврах.
var table = testtable; var colTitles = table.tHead.rows[0].getElementsByTagName('td'); for (var i = 0; i < colTitles.length; i++) { var newElem = document.createElement('div'); newElem.innerHTML = '⇅'; newElem.sorterDiv = true; newElem.sortIncrease = false; newElem.colNum = i; newElem.table = table; newElem.style="position: relative; float: right; width: 25px; height: 30px; background-color: #d8d8d8; overflow: hidden; font-size: 30px; line-height: 30px; text-align: center; margin: 0px 0px 0px 10px; cursor: default;" colTitles[i].appendChild(newElem); } table.tHead.addEventListener('click', handleTheadClick); function handleTheadClick(e) { if (!e.target.sorterDiv){ return; } // else { console.log('Начинаю сортировать по столбцу ' + e.target.colNum); } var table = e.target.table; var arr = []; var rows = table.tBodies[0].getElementsByTagName('tr'); for (var i = 0; i < rows.length; i++) { arr.push(rows[i]); } // сортирую массив рядов // если значения совпадают, то сортировка идёт по первому столбцу (столбцу номеров) arr.sort( function(a, b) { var thisIsNumber = !isNaN(a.children[e.target.colNum].innerText); var returnValue; if (thisIsNumber) { if ( +a.children[e.target.colNum].innerText > +b.children[e.target.colNum].innerText ) { returnValue = 1; } else if ( +a.children[e.target.colNum].innerText == +b.children[e.target.colNum].innerText ) { if ( +a.children[0].innerText > +b.children[0].innerText ) {returnValue = 1;} else {returnValue = -1;} } else { returnValue = -1; } } else { if ( a.children[e.target.colNum].innerText > b.children[e.target.colNum].innerText ) { returnValue = 1; } else if ( a.children[e.target.colNum].innerText == b.children[e.target.colNum].innerText ) { if ( +a.children[0].innerText > +b.children[0].innerText ) {returnValue = 1;} else {returnValue = -1;} } else { returnValue = -1; } } if (!e.target.sortIncrease) { returnValue *= -1;} return returnValue; }); e.target.sortIncrease = !e.target.sortIncrease; arr.forEach( function(elem) { table.tBodies[0].appendChild(elem); } ); // заново вставляю ряды в нужном порядке }
(из-за чертовых спамеров урлы в коментах теперь писать нельзя)
Комментариев нет