Как сделать сортировку в таблице по th с учетем div элементов, данные берутся из PHP

Question

у меня возникла проблема. Как сделать сортировку в таблице? Использую jQuery tablesorter, сортируются только первые три столбца (по алфавиту, медиа рейтинг, позитив), я так понимаю, это из-за того, что у меня 6 тегов th и 3 тега td, но как исправить данную проблему не знаю, ведь остальные элементы необходимые для сортировки находятся в одном td в div

<div class="row">
    <div class="col-lg-12">
        <div class="wrapper wrapper-content">
            <div class="row">
                <div class="ibox">
                    <ul class="nav nav-tabs">
                        <li>
                            <div class="active nav-link bg-light border-bottom">Кандидаты в президенты РК</div>
                        </li>

                    </ul>
                    <div class=" p-xl shadow-lg p-3 mb-5 rounded">
                        <div class="ibox-content shadow  rounded">
                            <table id="myTable" class="table">
                                <thead>
                                    <tr class="text-center text-muted ">
                                        <th class="border-right" style="width: 25%">По алфавиту</th>
                                        <th class="border-right" style="width: 20%">Медиа Индекс</th>
                                        <th class="border-right">Позитив</th>
                                        <th class="border-right">Нейтрал</th>
                                        <th class="border-right">Негатив</th>
                                        <th style="width: 30%"><i class="fa fa-history"></i> Период:
                                            <select>
                                                <option value="1" selected="">за месяц</option>
                                                <option value="2">за год</option>
                                            </select>
                                        </th>
                                    </tr>

                                </thead>
                                <tbody class="border border-white ">
                                    <div class="col-lg-12 ">

                                        <?php foreach ($dat as $rating) : ?>

                                            <tr>

                                                <td>
                                                    <div class="feed-element d-flex align-items-center">
                                                        <a class="float-left" href="#">
                                                            <img src="img/<?= $rating->img ?>" class="rounded-circle">
                                                        </a>
                                                        <div class="media-body ">
                                                            <h5><?= $rating->name ?></h5>
                                                            <h5 class="font-weight-light"><?= $rating->consignment ?></h5>
                                                        </div>
                                                    </div>
                                                </td>

                                                <td style="vertical-align: middle">
                                                    <div class="progress " style="max-width: <?= $rating->mediaindex ?>%;">
                                                        <div class="progress-bar bg-success rounded sin" style="width: 100%">
                                                            <div class="progress-value"><?= $rating->mediaindex ?>%</div>
                                                        </div>
                                                    </div>
                                                </td>



                                                <td colspan="4" style="vertical-align: middle">

                                                    <div class="progress sorten" style="max-width: 100%;">

                                                        <div class="progress-bar bg-primary rounded-left prim" style="width: <?= $rating->positive ?>%">
                                                            <div class="progress-value"><?= $rating->positive ?>%</div>
                                                        </div>


                                                        <div class="progress-bar bg-warning zhel" style="width: <?= $rating->neutral ?>%">
                                                            <div class="progress-value"><?= $rating->neutral ?>%</div>
                                                        </div>


                                                        <div class="progress-bar bg-danger rounded-right kras" style="width: <?= $rating->negative ?>%">
                                                            <div class="progress-value"><?= $rating->negative ?>%</div>
                                                        </div>

                                                    </div>


                                                </td>


                                            </tr>

                                        <?php endforeach; ?>

                                    </div>
                                </tbody>
                            </table>
                        </div>

                    </div>
                </div>

            </div>
        </div>
    </div>
</div>

$(function() {
    $("#myTable").tablesorter();
  });

Answer 1

Я сам все смог решить, для потомков поясню как:

Для каждой th дублируем собственный td, потом скрываем ненужные с помощью hidden, после уже в стилях подгоняем нужный размер. Сортировка работает!

БЛОГ НА HUSL

Как сделать сортировку в таблице по th с учетем div элементов, данные берутся из PHP

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