Сортировка таблицы по столбцам html+php

Question

Подскажите, пожалуйста, можно ли как-то выполнить сортировку данных в таблице по столбцам средствами не запросами sql, а js. У меня данные выводятся в таблицу циклом, но почему-то не сортируются.

Приложу код вывода базы и код сортировки:

$query = "SELECT d.id_data, m.model_name, d.data_value, t.type_value_unit, t.type_value_name, d.data_date 
                          FROM type_value t, models m, data_indicators d
                          WHERE d.data_id_station = '".$_GET['id']."' 
                                AND   m.id_model = d.data_id_model
                                AND   t.id_type_value = d.data_id_type_value
                                AND   t.id_type_value = d.data_id_type_value";

                $result = mysqli_query($link, $query) or die("Ошибка " . mysqli_error($link)); 
                $rows = mysqli_num_rows($result);

                echo "<table  class='table_sort' '>
                <thead>
                    <tr>
                        <th>№</th>
                        <th>Название датчика</th>
                        <th>Значение</th>
                        <th>Единица измерения</th>
                        <th>Тип значения</th>
                        <th>Дата</th>
                    </tr>
                </thead>";
            for ($i = 0 ; $i < $rows ; ++$i) {
                $row = mysqli_fetch_row($result);
                echo "<tbody><tr>";
                for ($j = 0 ; $j < 6 ; ++$j) 
                    echo "<td>$row[$j]</td>";
                echo "</tr></tbody>";
                }
            echo "</table>"; 

                    ?>

<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', () => {

    const getSort = ({ target }) => {
        const order = (target.dataset.order = -(target.dataset.order || -1));
        const index = [...target.parentNode.cells].indexOf(target);
        const collator = new Intl.Collator(['en', 'ru'], { numeric: true });
        const comparator = (index, order) => (a, b) => order * collator.compare(
            a.children[index].innerHTML,
            b.children[index].innerHTML
        );

        for(const tBody of target.closest('table').tBodies)
            tBody.append(...[...tBody.rows].sort(comparator(index, order)));

        for(const cell of target.parentNode.cells)
            cell.classList.toggle('sorted', cell === target);
    };

    document.querySelectorAll('.table_sort thead').forEach(tableTH => tableTH.addEventListener('click', () => getSort(event)));

});
</script>

Answer 1

Добавте обработчик на thead td типа этого

let theadLinks = document.querySelector('thead td'); 
let tbody = document.querySelector('tbody');
theadLinks.forEach( elem => elem.addEventListener('click', () => getData(elem.innerText) )   )

function getData(sortValue){
  tbody.innerHTML = ''//или можете удалять все tr
  let url = ''; //cсылка на php файл

  let data = new FormData();
  data.append('sortValue', sortValue);
  fetch(url,{
   method : 'POST',
   body : data
  })
  .then( response => response.text() )
  .then( data => tbody.innerHTML = data )
}

В php получите название по которому хотите сортировать, и к запросу добавьте:

по убыванию

ORDER BY `sort` DESK

по возрастанию

ORDER BY `sort` ASC

получив массив данных cоздавайте tr для tbody, так чтобы php скрипт выдавал готовый html в виде

<tr>...</tr>
<tr>...</tr> 
<tr>...</tr>
<tr>...</tr>

Answer 2

На js сортировка делается так https://datatables.net/

БЛОГ НА HUSL

Сортировка таблицы по столбцам html+php

Ответы (2 шт):