Форум

Neotwalker · #1 (**permalink**) 09.04.2018, 19:13

Не могу понять, почему не сортирует по первому столбцу, а только по второму и как сделать так, чтобы после сортировки таблицу можно было возвращать в начальное положение?

<!DOCTYPE HTML>
<!-- Do not remove and do not change this string -->
<html>
<!-- сортировать таблицу -->
<head>
<meta charset=utf-8>
<style>
	th{cursor: pointer;
}
	th:hover {
background: yellow;
}
</style>


</head> 
<body>
<table border="1px" cellpadding="10px" name="mytab" id="mytab">
	<thead bgcolor="aqua">
		<th data-type="col1" align="center" >Фамилия</th>
		<th data-type="col2" align="center" >Телефон</th>
	</thead>
	<tbody>
	<tr>
		<td>Яковлев</td>
		<td>7453217</td>
	</tr>
	<tr>
		<td>Иванов</td>
		<td>3453212</td>
	</tr>
	<tr>
		<td>Бендер</td>
		<td>8453212</td>
	</tr>
	<tr>
		<td>Паниковский</td>
		<td>6453212</td>
	</tr>
	<tr>
		<td>Петров</td>
		<td>8765432</td>
	</tr>
	<tr>
		<td>Сидоров</td>
		<td>5432345</td>
	</tr>
	<tr>
		<td>Македонский</td>
		<td>8765233</td>
	</tr>
	<tr>
		<td>Иоанн 23</td>
		<td>2345432</td>
	</tr>
	</tbody>
</table>
<script>
	var mytab = document.getElementById('mytab');
	mytab.onclick = function(e){
      
		if(e.target.tagName != 'TH') 
			return;


		sortGrid(e.target.cellIndex, e.target.getAttribute('data-type'));

	};
	function sortGrid(colNum, type){

		var tbody = mytab.getElementsByTagName('tbody')[0];
		var rowsArray = [].slice.call(tbody.rows);
		var compare;
switch (type) {

	case 'col1':

		compare = function(rowA, rowB){

		return rowA.cells[colNum].innerHTML - rowB.cells[colNum].innerHTML;

	};

	break;

	case 'col2':

		compare = function(rowA, rowB){

		return rowA.cells[colNum].innerHTML > rowB.cells[colNum].innerHTML;

};

	break;

}
	rowsArray.sort(compare);
	for (var i = 0; i < rowsArray.length; i++){

		tbody.appendChild(rowsArray[i]);

	}


	mytab.appendChild(tbody);


}
</script>
</body>
</html>
<!-- Do not remove and do not change this string -->

j0hnik · #2 (**permalink**) 09.04.2018, 19:22

return rowA.cells[colNum].innerHTML > rowB.cells[colNum].innerHTML;

80ая строка

j0hnik · #3 (**permalink**) 09.04.2018, 19:24

чтобы вернуть первоначальное состояние, нужно его сохранить

var save = document.getElementById('mytab').innerHTML;

а затем вернуть по кнопке или как вам угодно

document.getElementById('mytab').innerHTML = save;

Neotwalker · #4 (**permalink**) 09.04.2018, 19:24

С этим я справился уже просто переставив col'ы. Но все равно спасибо)

рони · #5 (**permalink**) 09.04.2018, 20:30

Neotwalker,
второй клик отменяет сортировку

<!DOCTYPE HTML>
<!-- Do not remove and do not change this string -->
<html>
<!-- сортировать таблицу -->
<head>
<meta charset=utf-8>
<style>
    th{cursor: pointer;
}
    th:hover {
background: yellow;
}
th.red{
    background-color: Red;
    color: White;
}

</style>


</head>
<body>
<table border="1px" cellpadding="10px" name="mytab" id="mytab">
    <thead bgcolor="aqua">
        <th align="center" >Фамилия</th>
        <th align="center" >Телефон</th>
    </thead>
    <tbody>
    <tr>
        <td>Яковлев</td>
        <td>7453217</td>
    </tr>
    <tr>
        <td>Иванов</td>
        <td>3453212</td>
    </tr>
    <tr>
        <td>Бендер</td>
        <td>8453212</td>
    </tr>
    <tr>
        <td>Паниковский</td>
        <td>6453212</td>
    </tr>
    <tr>
        <td>Петров</td>
        <td>8765432</td>
    </tr>
    <tr>
        <td>Сидоров</td>
        <td>5432345</td>
    </tr>
    <tr>
        <td>Македонский</td>
        <td>8765233</td>
    </tr>
    <tr>
        <td>Иоанн 23</td>
        <td>2345432</td>
    </tr>
    </tbody>
</table>
<script>
  var mytab = document.getElementById("mytab");
var tbody = mytab.getElementsByTagName("tbody")[0];
var rows = tbody.querySelectorAll("tr");
mytab.onclick = function(e) {
    if (e.target.tagName != "TH") {
        return;
    }
    var index = e.target.cellIndex;
    var sort = e.target.dataset.sort ^ 1;
    var th = mytab.querySelectorAll("th")[+!index];
    th.dataset.sort = 0;
    th.classList.remove("red");
    e.target.classList[sort ? "add" : "remove"]("red");
    e.target.dataset.sort = sort;
    sortGrid(index, !sort);
};

function sortGrid(colNum, sort) {
    [].slice.call(rows).sort(function(rowA, rowB) {
        if (sort) {
            return 0;
        }
        if (colNum) {
            return rowA.cells[colNum].innerHTML - rowB.cells[colNum].innerHTML;
        } else {
            return rowA.cells[colNum].innerHTML.localeCompare(rowB.cells[colNum].innerHTML, "ru");
        }
    }).forEach(function(row) {
        tbody.appendChild(row);
    });
};
</script>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript