Сортировка значений в таблице

@shmdarya · Регистрация: 31.10.2016

Студворк — интернет-сервис помощи студентам

Здравствуйте.
Есть таблица, есть js, который сортирует данные в данной таблице наименованию объекта, по дате и тд и тп. Как сделать, чтобы по умолчанию сортировка стояла на дате ? т.е. при обновлении страницы, или при ее посещении, таблица сортировалась по столбцу с датой ?

Qwerty_Wasd · 02.07.2018, 23:59

shmdarya,

JavaScript
1
window.addEventListener('load',функция_сортировки_по_дате);

@shmdarya · 03.07.2018, 00:11 **[ТС]**

Qwerty_Wasd, к сожалению, не помогло(
может взгляните на код ?

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<TABLE id="grid" BORDER = 0 bgcolor="#004b71" width="100%" style="font-size:15px; border-width: thin;">
<thead>
<TR style="font-weight:700; background: linear-gradient(to top, #e0edf5, #c2dbe7);">
    <TH class="nameAttr" data-type="link">Задачи</TH>
    <TH class="nameAttr" data-type="link">Название маршрута</TH>
    <TH class="nameAttr" data-type="link">Письмо</TH>
    <TH class="nameAttr" data-type="date">Объект</TH>
    <TH class="nameAttr" data-type="link">Корреспондент организация</TH>
    <TH class="nameAttr" data-type="date">Дата начала</TH>
    <TH class="nameAttr" data-type="date">Планируемая дата окончания</TH>
</TR>
<thead>
</TABLE>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
var grid = document.getElementById('grid');
    
    var sort_case_sensitive = false;
    grid.onclick = function(e) {
      if (e.target.tagName != 'TH') return;
      sortGrid(e.target.cellIndex, e.target.getAttribute('data-type'));
    };
 
    function sortGrid(colNum, type) {
      var tbody = grid.getElementsByTagName('tbody')[0];
      var rowsArray = [].slice.call(tbody.rows);
      var compare;
 
      switch (type) {
        case 'link':
          compare = function(rowA, rowB) {
            var dateA = rowA.cells[colNum].textContent.trim();
            var dateB = rowB.cells[colNum].textContent.trim();
            if(sort_case_sensitive == false){ return dateA > dateB ? 1 : -1; }else{ return dateA < dateB ? 1 : -1; }
        };
        break;
        case 'date':
          compare = function(rowA, rowB) {
            var dateA = new Date(rowA.cells[colNum].innerHTML.replace( /(\d{2}).(\d{2}).(\d{4})/, "$2/$1/$3"));
            var dateB = new Date(rowB.cells[colNum].innerHTML.replace( /(\d{2}).(\d{2}).(\d{4})/, "$2/$1/$3"));
            
            if(sort_case_sensitive == false){ return dateA > dateB ? 1 : -1; }else{ return dateA < dateB ? 1 : -1; }
        };
        break;
      }
 
      rowsArray.sort(compare);
      grid.removeChild(tbody);
      
      for (var i = 0; i < rowsArray.length; i++) {
        tbody.appendChild(rowsArray[i]);
      }
 
      grid.appendChild(tbody);
      
        if(sort_case_sensitive == false){
            sort_case_sensitive = true;
        }else{
            sort_case_sensitive = false;
        }
 
    }

@Evgen1337 · 03.07.2018, 00:19

JavaScript
1
sortGrid(5, "date");

Qwerty_Wasd · 03.07.2018, 00:40

shmdarya, не не помогло, а не поняли как воспользоваться.

Здесь за правду не бьют. Ведь от точности информации зависит как быстро Вам помогут и помогут ли вообще. И кстати следите за правильным закрытием тегов. В вашем коде не правильно закрыт тег head.
Ссылка на песочницу - https://codepen.io/qwerty_wasd/pen/jKJGLK
добавил верстки для примера и id нужной ячейке(посмотрите код внимательно) -

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<table id="grid" border="0" bgcolor="#004b71" width="100%" style="font-size:15px; border-width: thin;">
  <thead>
    <tr style="font-weight:700; background: linear-gradient(to top, #e0edf5, #c2dbe7);">
      <th class="nameAttr" data-type="link">Задачи</th>
      <th class="nameAttr" data-type="link">Название маршрута</th>
      <th class="nameAttr" data-type="link">Письмо</th>
      <th class="nameAttr" data-type="date">Объект</th>
      <th class="nameAttr" data-type="link">Корреспондент организация</th>
      <th class="nameAttr" id="tarObj" data-type="date">Дата начала</th>
      <th class="nameAttr" data-type="date">Планируемая дата окончания</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>адын</td>
      <td>ехаем вперед</td>
      <td>111111</td>
      <td>ящик пива</td>
      <td>ИП Василич</td>
      <td>03.04.18</td>
      <td>06.05.18</td>
    </tr>
    <tr>
      <td>два</td>
      <td>ихаем назад</td>
      <td>222222</td>
      <td>надувная телка</td>
      <td>Мегакорпорация ЗЛА</td>
      <td>01.02.18</td>
      <td>02.02.18</td>
    </tr>
  </tbody>
</table>

Код, что я предложил вначале в самом низу.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
var grid = document.getElementById('grid');
    
    var sort_case_sensitive = false;
    grid.onclick = function(e) {
      if (e.target.tagName != 'TH') return;
      sortGrid(e.target.cellIndex, e.target.getAttribute('data-type'));
    };
 
    function sortGrid(colNum, type) {
      var tbody = grid.getElementsByTagName('tbody')[0];
      var rowsArray = [].slice.call(tbody.rows);
      var compare;
 
      switch (type) {
        case 'link':
          compare = function(rowA, rowB) {
            var dateA = rowA.cells[colNum].textContent.trim();
            var dateB = rowB.cells[colNum].textContent.trim();
            if(sort_case_sensitive == false){ return dateA > dateB ? 1 : -1; }else{ return dateA < dateB ? 1 : -1; }
        };
        break;
        case 'date':
          compare = function(rowA, rowB) {
            var dateA = new Date(rowA.cells[colNum].innerHTML.replace( /(\d{2}).(\d{2}).(\d{4})/, "$2/$1/$3"));
            var dateB = new Date(rowB.cells[colNum].innerHTML.replace( /(\d{2}).(\d{2}).(\d{4})/, "$2/$1/$3"));            
            if(sort_case_sensitive == false){ return dateA > dateB ? 1 : -1; }else{ return dateA < dateB ? 1 : -1; }
        };
        break;
      }
 
      rowsArray.sort(compare);
      grid.removeChild(tbody);
      
      for (var i = 0; i < rowsArray.length; i++) {
        tbody.appendChild(rowsArray[i]);
      }
 
      grid.appendChild(tbody);
      
        if(sort_case_sensitive == false){
            sort_case_sensitive = true;
        }else{
            sort_case_sensitive = false;
        }
 
    }
//всего то надо было
window.addEventListener('load',()=>sortGrid(tarObj.cellIndex, tarObj.dataset.type));

Новые блоги и статьи Все статьи Все блоги /
Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .
Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .

@shmdarya 0 / 0 / 0 Регистрация: 31.10.2016 Сообщений: 74

	Сортировка значений в таблице 02.07.2018, 23:19. Показов 1728. Ответов 4 Метки нет (Все метки) Здравствуйте. Есть таблица, есть js, который сортирует данные в данной таблице наименованию объекта, по дате и тд и тп. Как сделать, чтобы по умолчанию сортировка стояла на дате ? т.е. при обновлении страницы, или при ее посещении, таблица сортировалась по столбцу с датой ? 0

Сортировка значений в таблице

Решение