Javascript-форум - Сортировка таблицы

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Сортировка таблицы (https://javascript.ru/forum/jquery/73804-sortirovka-tablicy.html)

Сортировка таблицы

У меня есть таблица, которая сортирует строки. как сделать так, чтобы сортировка не касалась первого столбика (нумерации)

<!DOCTYPE html>
<html>
<head>
	<title>Сортер</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
<table id="ceo">
    <thead>
        <tr>
        	<th title="num">#</th>
            <th title="Name">Имя</th>
            <th title="Gender">Gender</th>
            <th title="Age">Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        	<td>1</td>
            <td class="content">Алёша</td>
            <td class="content">М</td>
            <td class="content">22</td>
        </tr>
        <tr>
        	<td>2</td>
            <td class="content">Пётр</td>
            <td class="content">М</td>
            <td class="content">19</td>
        </tr>
        <tr>
        	<td>3</td>
            <td class="content">Яна</td>
            <td class="content">Ж</td>
            <td class="content">18</td>
        </tr>
    </tbody>
    <script src="jquery-3.2.1.slim.min.js"></script>
	<script src="script.js"></script>
</table>
</body>
</html>

$(function () {
  $('table')
    .on('click', 'th', function () {
      var index = $(this).index(),
          rows = [],
          thClass = $(this).hasClass('asc') ? 'desc' : 'asc';

      $('#ceo th').removeClass('asc desc');
      $(this).addClass(thClass);

      $('#ceo tbody tr').each(function (index, row) {
        rows.push($(row).detach());
      });

      rows.sort(function (a, b) {
        var aValue = $(a).find('.content').eq(index).text(),
            bValue = $(b).find('.content').eq(index).text();

        return aValue > bValue
             ? 1
             : aValue < bValue
             ? -1
             : 0;
      });

      if ($(this).hasClass('desc')) {
        rows.reverse();
      }

      $.each(rows, function (index, row) {
        $('#ceo tbody').append(row);
      });
    });
});

или подскажите как это можно реализовать при помощи tablesorter

Строка 3 кода:

.on('click', 'th:not(:first)', function () {

Строка 31 кода:

$(row).appendTo('#ceo tbody').find('td:first').text(index+1);

И

<script src="jquery-3.2.1.slim.min.js"></script>
<script src="script.js"></script>

не в конец таблицы, а в конец тела документа, то есть перед </body>

И лишнее в коде можно сократить:

<thead>
        <tr>
        	<th title="num">#</th>
            <th class="desc" title="Name">Имя</th>
            <th class="desc" title="Gender">Gender</th>
            <th class="desc" title="Age">Age</th>
        </tr>
    </thead>

$(function () {
    $('#ceo').on('click', 'th:not(:first)', function () {
        var dst = $(this),
            tbl = $('#ceo tbody'),  
            index = dst.index(),
            rows = [];
      
        dst.toggleClass('asc desc');

        tbl.find('tr').each(function () {
            rows.push(this);
        });

        rows.sort(function (a, b) {
            var aValue = $(a).find('.content').eq(index).text(),
                bValue = $(b).find('.content').eq(index).text();
            
            return aValue > bValue
                ? 1
                : aValue < bValue
                ? -1
                : 0;
        });

        if (dst.hasClass('desc')) rows.reverse();
 
        $.each(rows, function (index, row) {
            $(row).appendTo(tbl).find('td:first').text(index+1);
        });
    });
});

Цитата:

Сообщение от Retro_1477

как это можно реализовать при помощи tablesorter

https://javascript.ru/forum/showthread.php?p=279930

сортировка строк, кроме первой колонки и css счётчик

Retro_1477,

<!DOCTYPE html>
<html>
<head>
    <title>Сортер</title>
    <meta charset="utf-8">
    <style type="text/css">
    #ceo{border:5px ridge #73766f;border-collapse:collapse}
    #ceo thead,th{background:-webkit-linear-gradient(top right,#b8b9b1,#fff);background:-moz-linear-gradient(top right,#b8b9b1,#fff);background:-o-linear-gradient(top right,#b8b9b1,#fff);background:-ms-linear-gradient(top right,#b8b9b1,#fff);text-align:center;vertical-align:text-top;padding:10px;border-bottom:3px ridge #73766f;border-left:1px solid #73766f;border-collapse:collapse}
    #ceo td,tr{text-align:left;vertical-align:text-top;padding:10px;border:1px solid #73766f;border-collapse:collapse;background:#fff}
#ceo{
    counter-reset: headings 0;
}

#ceo tbody td:first-child:before {
    counter-increment: headings 1;
    content: counter(headings, decimal) " ";
}

.desc:after{
    content: "\25BC"
}
.asc:after{
    content: "\25B2"
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
 $(function() {
    var rows = $("#ceo tbody tr").get();
    $("table").on("click", "th:not(:first)", function() {
        var index = $(this).index(),
            thClass = $(this).hasClass("asc") ? "desc" : "asc";
        $("#ceo th").removeClass("asc desc");
        $(this).addClass(thClass);
        rows.sort(function(a, b) {
            var aValue = $(a).find("td").eq(index).text(),
                bValue = $(b).find("td").eq(index).text();
            return aValue > bValue ? 1 : aValue < bValue ? -1 : 0
        });
        if (thClass == "desc") rows.reverse();
        $("#ceo tbody").append(rows)
    })
});
</script>
</head>
<body>
<table id="ceo">
    <thead>
        <tr>
        	<th title="num">#</th>
            <th title="Name">Имя</th>
            <th title="Gender">Gender</th>
            <th title="Age">Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
        	<td></td>
            <td class="content">Алёша</td>
            <td class="content">М</td>
            <td class="content">22</td>
        </tr>
        <tr>
        	<td></td>
            <td class="content">Пётр</td>
            <td class="content">М</td>
            <td class="content">19</td>
        </tr>
        <tr>
        	<td></td>
            <td class="content">Яна</td>
            <td class="content">Ж</td>
            <td class="content">18</td>
        </tr>
    </tbody>
  </table>
</body>
</html>