| № | Имя | Возраст | Сколько пар обуви |
| 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); } ); // заново вставляю ряды в нужном порядке
}
(из-за чертовых спамеров урлы в коментах теперь писать нельзя)
Комментариев нет