Как сделать сортировку в html с использованием php?

Question

[Dom Alfro]

Добрый день!
Хотел бы понять как реализовать такой выпадающий список на html
( разметка не моя )

<div class="items__options options">
            <div class="options__sort sort">
                <span class="dropdown-el">
                    <input type="radio" name="sortType" value="sort-az" checked="checked" id="sort-az"><label
                        for="sort-az">Название: А — Я</label>
                    <input type="radio" name="sortType" value="sort-za" id="sort-za"><label for="sort-za">Название:
                        Я — А</label>
                    <input type="radio" name="sortType" value="PriceIncreasing" id="sort-low"><label
                        for="sort-low">Цена: сначала дешевые</label>
                    <input type="radio" name="sortType" value="PriceDecreasing" id="sort-high"><label
                        for="sort-high">Цена: сначала дорогие</label>
                    <input type="radio" name="sortType" value="ProductNew" id="sort-new"><label for="sort-new">Порядок:
                        сперва новые</label>
                    <input type="radio" name="sortType" value="ProductOld" id="sort-old"><label for="sort-old">Порядок:
                        сперва старые</label>
                </span>
            </div>
        </div>

я знаю что можно использовать select и option - но сказали что нужно сделать именно так. ладно .. стили все работает эффект сделан. Но как это реализовать на php что бы когда выбираешь например цена: с начало дешевле. И готовый метод вызывается и сортируется -
куда этот метод то вставить, что бы он понял что я хочу выполнить команду по определенной
выборке из базы данных.
просто понять не могу как заставить работать метод и куда его нужно установить, как это сделать, что бы заставить его работать?

Comments

[Gennady S]

Я Вас порадую: меньшее уже сделано. Осталось, самую малость — все остальное. А чтобы решить задачу, Вы должны ответить для себя на вопросы о последовательности действий, об алгоритме решения. На данном же этапе Вашего анализа даже не ясно, для чего эта выборка. Выводите таблицу? Значит эту таблицу надо еще и сгенерировать на основе выборки из базы данных, либо на клиенте, либо вернуть HTML с сервера. По всей видимости, Вам нужно: 1) среагировать на выбор в списке, JavaScript, событие change 2) отправить результат выбора на сервер, JavaScript 3) на сервере сделать запрос на основе этого выбора и вернуть результат на страницу 4) вывести обновленные данные, зависимо от механизма. Так же Вы можете воспользоваться готовым движком таблиц

[Dom Alfro]

Gennady S, MVC - методы выборки есть в model - выборка от меньшего к большему - от большего к меньшему ...
через js я делать не хочу ...
мне надо узнать каким образом должен произойти вызов метода.
если в процедурном стиле это по легче то в oop я просто не знаю как передать метод в выборку что бы он действительно показывал как это можно отобразить.
допустим ссылка
<a hred/showAll/>Показать Все</a>то он перейдет на страницу открыв метод который уже есть
так вот методы готовы - тут нужно понять узнать как же что бы он по новой это показывал только с другой стороны

[Gennady S]

Вячеслав Коростин, тогда сделайте список ссылками или среагируйте на нажатие с JS и сделайте программный переход по ссылке:

<!-- вместо -->
<input type="radio" name="sortType" value="sort-az" checked="checked" id="sort-az"><label for="sort-az">Название: А — Я</label>
<!-- например: -->
<a href="/showAll?order=asc&sort=name">Название: А — Я</a>

Или (чисто для примера, можно решить эффективнее):

document.getElementById('sort-az').onchange = function (event) {
    if (event.target.checked)
        document.location.href =  '/showAll?order=asc&sort=name';
};

[Dom Alfro]

Gennady S, спасибо ! вот этом можно отметить решением !

[Gennady S]

Вячеслав Коростин, скопировал в ответы

Answer 1

[Gennady S]

Вячеслав Коростин, сделайте список ссылками или среагируйте на нажатие с JS и сделайте программный переход по ссылке:

<!-- вместо -->
<input type="radio" name="sortType" value="sort-az" checked="checked" id="sort-az"><label for="sort-az">Название: А — Я</label>
<!-- например: -->
<a href="/showAll?order=asc&sort=name">Название: А — Я</a>

Или (чисто для примера, можно решить эффективнее):

document.getElementById('sort-az').onchange = function (event) {
    if (event.target.checked)
        document.location.href =  '/showAll?order=asc&sort=name';
};