Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/topic.php on line 737
Форумы портала PHP.SU :: Сортировка колонок при первой загрузке страницы

 PHP.SU

 Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Описание: Сортировка
Поиск в теме | Версия для печати
thefreedom
Отправлено: 29 Марта, 2021 - 07:59:12
Post Id



Новичок


Покинул форум
Сообщений всего: 55
Дата рег-ции: Окт. 2012  


Помог: 0 раз(а)
Всем доброго дня.
Первый вопрос, столкнулся с проблеммой такого характера при загрузки страницы таблица сортируется не правильно но если нажать на любую колонку (шапку), то сортируется так как нужно по алфавиту, кто силён и может помочь.

Я понимаю что проблема в использовании class, без него сортируется правильно, но мне нужны классы тк нужно скрывать определённые колонки, а в IE скрытие (display:none;) работает только когда класс у каждой колонки.

Конечно можно запретить IE вообще и проблемы не будет.

И второй вопрос как запретить показ 1й колонки с сохранением сортировки, делаю так:
<style type="text/css">
/* Фильтр колонок */
th
.c1,td:first-child{display:none;} /*Первая колонка*/
</style>
Но тогда сбивается очередность сортировки в шапке...

Стартовая страница
PHP:
скопировать код в буфер обмена
  1.  
  2. <?PHP
  3. function cmp($a,$b){return strcmp($a[0],$b[0]);}
  4. //
  5. $out=array();
  6. foreach(file('base.html') as $v)
  7.     $out[] = explode('<td>',$v);
  8. usort($out, 'cmp');
  9.  
  10. $tbl = '
  11. <div class="container">
  12. <table class="table_sort">
  13. <thead>
  14. <tr>
  15.  
  16. <th bgcolor=000000><font color=ffffff><b>№:
  17. <th bgcolor=000000 data-order="1" class="sorted" width=290>ФИО
  18. <th bgcolor=000000><font color=ffffff><b>Тел
  19. // ---------------- И т.д.
  20.  
  21. </thead>
  22. <tbody>
  23. ';
  24. foreach ($out as $v)
  25.     $tbl .= join("<td>",$v);
  26.  
  27. echo $tbl;
  28. ?>
  29.  


Скрипт сортировки
CODE (javascript):
скопировать код в буфер обмена
  1.  
  2. document.addEventListener('DOMContentLoaded', () => {
  3.  
  4.     const getSort = ({ target }) => {
  5.         const order = (target.dataset.order = -(target.dataset.order || -1));
  6.         const index = [...target.parentNode.cells].indexOf(target);
  7.         const collator = new Intl.Collator(['ru', 'en'], { numeric: true });
  8.         const comparator = (index, order) => (a, b) => order * collator.compare(
  9.             a.children[index].innerHTML,
  10.             b.children[index].innerHTML
  11.         );
  12.        
  13.         for(const tBody of target.closest('table').tBodies)
  14.             tBody.append(...[...tBody.rows].sort(comparator(index, order)));
  15.  
  16.         for(const cell of target.parentNode.cells)
  17.             cell.classList.toggle('sorted', cell === target);
  18.     };
  19.    
  20.     document.querySelectorAll('.table_sort thead').forEach(tableTH => tableTH.addEventListener('click', () => getSort(event)));
  21.    
  22. });
  23.  


Стили
CODE (htmlphp):
скопировать код в буфер обмена
  1.  
  2. table {
  3.       border-collapse: collapse;/* Убираем двойные линии между ячейками */
  4.           width: 100%; /* Ширина таблицы */
  5.     }
  6.  
  7.  tbody tr:hover /* Цвет фона при наведении */
  8. {
  9.     background: #C0C0C0;
  10. }
  11.        
  12. .table_sort th /* Шапка */
  13. {
  14.   text-align: left;
  15.   color: #ffffff;
  16.  background: #000000;
  17.  cursor: pointer;
  18.   font-weight: normal; 
  19. }
  20.  
  21. .table_sort td,
  22. .table_sort th
  23. {
  24.   height: 25px; /* Ширина шапки */
  25.   padding: 0px; /* Поля вокруг текста */
  26.   border-top: 0px; /* Рамка */
  27.   border: 1px solid #999999; /* Толщина и цвет линий */  
  28. }
  29.  
  30. tr:nth-child(2n) /* Каждая вторая строка */
  31. {
  32. background: #DCDCDC;
  33. }
  34.  
  35.  
  36. th.sorted[data-order="1"],
  37. th.sorted[data-order="-1"] {
  38.   position: sticky;
  39.   top: 0;
  40. }
  41.  
  42. th.sorted[data-order="1"]::after,
  43. th.sorted[data-order="-1"]::after
  44. {
  45.   right: 2px;
  46.   position: absolute;
  47. }
  48.  
  49. th.sorted[data-order="-1"]::after
  50. {
  51.         content:  "\25BC";
  52. }
  53.  
  54. th.sorted[data-order="1"]::after
  55. {
  56.         content: "\25B2"
  57. }
  58.  
  59. /* Закрепить шапку */
  60. .container
  61. {
  62.   height: 100%;
  63.   width: 100%;
  64.   margin: left;
  65.   overflow: auto;
  66. }
  67.  
  68. thead th
  69. {
  70.   position: sticky;
  71.   top: 0;
  72. }
  73.  


Файл с данными
CODE (html):
скопировать код в буфер обмена
  1.  
  2. <tr class='noshow'><td class=c1><a0>0002<a0><td class=c2><a1>Коммутатор<a1><td class=c3><a2>Нет<a2><td class=c4><a2>Нет<a3>
  3. <tr class='noshow'><td class=c1><a0>0040<a0><td class=c2><a1>Оргтехника<a1><td class=c3><a2>Нет<a2><td class=c4><a2>Нет<a3><td class=c5><a3>Нет<a4>
  4. <tr class='noshow'><td class=c1><a0>0048<a0><td class=c2><a1>Иванов<a1><td class=c3><a2>Нет<a2><td class=c4><a2>Нет<a3><td class=c5><a3>Нет<a4>
  5. <tr class='noshow'><td class=c1><a0>0042<a0><td class=c2><a1>Петров<a1><td class=c3><a2>Нет<a2><td class=c4><a2>Нет<a3><td class=c5><a3>Нет<a4>
  6.  
  7.  

(Отредактировано автором: 29 Марта, 2021 - 09:57:13)

 
 Top
Vladimir Kheifets
Отправлено: 29 Марта, 2021 - 10:16:29
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 879
Дата рег-ции: Март 2017  
Откуда: Германия, Бавария


Помог: 37 раз(а)
thefreedom пишет:
Всем доброго дня.
Первый вопрос, столкнулся с проблеммой такого характера при загрузки страницы таблица сортируется не правильно но если нажать на любую колонку (шапку), то сортируется так как нужно по алфавиту, кто силён и может помочь.
Я понимаю что проблема в использовании class, без него сортируется правильно, но мне нужны классы тк нужно скрывать определённые колонки, а в IE скрытие (display:none;) работает только когда класс у каждой колонки.


Добрый день!
В Internet Explorer могут быть проблемы связанные ECMAScript 2015 (6th Edition, ECMA-262).
Цитата:
const getSort = ({ target }) => {...
Цитата:
The const keyword is not supported in Internet Explorer 10 or earlier.
https://www[dot]w3schools[dot]com/js/js_const[dot]asp

Цитата:
for(const tBody of target.closest('table').tBodies)
Цитата:
For/of is not supported in Internet Explorer.
https://www[dot]w3schools[dot]com/js/js_loop_forof[dot]asp

См. ошибки JS в консоле браузера
Удачи!
 
 Top
thefreedom
Отправлено: 29 Марта, 2021 - 10:22:04
Post Id



Новичок


Покинул форум
Сообщений всего: 55
Дата рег-ции: Окт. 2012  


Помог: 0 раз(а)
Vladimir Kheifets пишет:
thefreedom пишет:
Всем доброго дня.
Первый вопрос, столкнулся с проблеммой такого характера при загрузки страницы таблица сортируется не правильно но если нажать на любую колонку (шапку), то сортируется так как нужно по алфавиту, кто силён и может помочь.
Я понимаю что проблема в использовании class, без него сортируется правильно, но мне нужны классы тк нужно скрывать определённые колонки, а в IE скрытие (display:none;) работает только когда класс у каждой колонки.


Добрый день!
В Internet Explorer могут быть проблемы связанные ECMAScript 2015 (6th Edition, ECMA-262).
Цитата:
const getSort = ({ target }) => {...
Цитата:
The const keyword is not supported in Internet Explorer 10 or earlier.
https://www[dot]w3schools[dot]com/js/js_const[dot]asp

Цитата:
for(const tBody of target.closest('table').tBodies)
Цитата:
For/of is not supported in Internet Explorer.
https://www[dot]w3schools[dot]com/js/js_loop_forof[dot]asp

См. ошибки JS в консоле браузера
Удачи!



Да я уже отключил его скриптом:
<script>
navigator.appName == 'Microsoft Internet Explorer' && window.location.replace("internetexplorer.html");
</script>


Но вопрос второй по скрытию строки остался, как правильно скрыть первый слтолбец, чтобы сортировка не сдвинулась ?
 
 Top
Vladimir Kheifets
Отправлено: 29 Марта, 2021 - 13:41:01
Post Id



Частый посетитель


Покинул форум
Сообщений всего: 879
Дата рег-ции: Март 2017  
Откуда: Германия, Бавария


Помог: 37 раз(а)
thefreedom пишет:
0.post
И второй вопрос как запретить показ 1й колонки с сохранением сортировки?...
2.post
Но вопрос второй по скрытию строки остался, как правильно скрыть первый слтолбец, чтобы сортировка не сдвинулась ?


Если Вам нужно скрыть первый столбец, то может быть сделать это в PHP?
Просто исключите первый <td> после распаковки данных и уберите первый <th>
 
 Top
thefreedom
Отправлено: 29 Марта, 2021 - 13:43:15
Post Id



Новичок


Покинул форум
Сообщений всего: 55
Дата рег-ции: Окт. 2012  


Помог: 0 раз(а)
Vladimir Kheifets пишет:
thefreedom пишет:
0.post
И второй вопрос как запретить показ 1й колонки с сохранением сортировки?...
2.post
Но вопрос второй по скрытию строки остался, как правильно скрыть первый слтолбец, чтобы сортировка не сдвинулась ?


Если Вам нужно скрыть первый столбец, то может быть сделать это в PHP?
Просто исключите первый <td> после распаковки данных и уберите первый <th>


Сделал так, спасибо за наводку.
CODE (javascript):
скопировать код в буфер обмена
  1. print str_replace
  2. (
  3. ['<td><a0>'],
  4. ['<a hidden>'],
  5. $tbl);
  6. print "</table>";

(Отредактировано автором: 29 Марта, 2021 - 15:59:31)

 
 Top
Поиск в теме | Версия для печати
Страниц (1): [1]
Сейчас эту тему просматривают: 0 (гостей: 0, зарегистрированных: 0)
« Вопросы новичков »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
  



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB