0

у меня возникла проблема. Как сделать сортировку в таблице? Использую 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();
  });

введите сюда описание изображения

2
  • А каким боком тут MySQL?
    – Akina
    29 ноя 2022 в 9:58
  • @Akina ну я данные для таблицы брал из MySQL, указал на всякий случай, вдруг поможет) 29 ноя 2022 в 10:06

1 ответ 1

1

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.