Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.05.2018, 05:47
Интересующийся
Отправить личное сообщение для Retro_1477 Посмотреть профиль Найти все сообщения от Retro_1477
 
Регистрация: 14.04.2018
Сообщений: 17

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

<!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);
      });
    });
});
Ответить с цитированием
  #2 (permalink)  
Старый 17.05.2018, 06:53
Интересующийся
Отправить личное сообщение для Retro_1477 Посмотреть профиль Найти все сообщения от Retro_1477
 
Регистрация: 14.04.2018
Сообщений: 17

или подскажите как это можно реализовать при помощи tablesorter
Ответить с цитированием
  #3 (permalink)  
Старый 17.05.2018, 08:05
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 8,796

Строка 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);
        });
    });
});

Последний раз редактировалось laimas, 17.05.2018 в 10:14.
Ответить с цитированием
  #4 (permalink)  
Старый 17.05.2018, 10:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 23,196

Сообщение от Retro_1477
как это можно реализовать при помощи tablesorter
https://javascript.ru/forum/showthread.php?p=279930
Ответить с цитированием
  #5 (permalink)  
Старый 17.05.2018, 10:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 23,196

сортировка строк, кроме первой колонки и 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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
сортировка строк таблицы atanov Javascript под браузер 17 10.01.2018 17:10
Сортировка таблицы Ajax TheLegi0ner jQuery 1 22.11.2015 11:11
Сортировка таблицы по алфавиту dozer Events/DOM/Window 6 17.10.2014 23:22
Сортировка таблицы (даты) edmundantes Элементы интерфейса 4 17.05.2012 08:51
Сортировка таблицы, при помощи js Prizrak177 Общие вопросы Javascript 10 02.09.2010 11:17