Sortowanie elementów na stronie

Question

Witam

Rozbudowuję stronę internetową (swoją, nie mam wykształcenia o kierunku informatycznym) i napotkałem problem, który stanowi obecnie dla mnie ścianę, nie do przejścia. Obecnie może troszeczkę ją zadrapałem.

Mam taką podstronę:

https://www.suerteprzewodnicy.pl/wycieczki/wycieczki-jednodniowe-warszawa

 

Są tam oferowane kierunki wycieczek, narazie jest tyle ile widać ale dojdą kolejne.

Chciałbym w jakiś sposób dać użytkownikowi możliwość sortowania wg.

- Alfabetu

- Ceny

- Dystansu

- Popularności

 

Jak narazie to wymyśliłem

Pomysł 1 - stworzenie 4 różnych podstron html z odpowiednio posegregowanymi elementami i wstawienie przycisków z hiperłączem do danej podstrony. To wiem jak zrobić, ale powinny być lepsze rozwiązania.

Pomysł 2 - Na swojej stronie używam <?php include('../nav.html'); ?> żeby ładować elementy z zewnętrznego pliku do kodu strony. Mógłbym stworzyć cztery takie elementy

<table border="0" cellpadding="0" cellspacing="8">
    <tr>
        <td><a class="change" href="/wycieczki/wycieczki-jednodniowe-warszawa?go=1">Kontakt</a></td>
    </tr>
    <tr>
        <td><a class="change" href="/wycieczki/wycieczki-jednodniowe-warszawa?go=2">Spis</a></td>
    </tr>
    <tr>
        <td><a class="change" href="/wycieczki/wycieczki-jednodniowe-warszawa?go=3">Opinnie</a></td>
    </tr>
    <tr>
</table>

<? 
switch ($_GET['go']) 
{ 
   case 2: 
      include("../alphabet.html"); 
      break; 
   case 3: 
      include("../cena.html"); 
      break; 
   case 1: 
   default: 
      include("../dystans.html");    
} 
?>

I stworzyć przyciski które podmieniały by tylko "includa" na stronie , ale to też jakieś takie mało eleganckie.

Pomysł 3 - Znalazłem coś takiego https://codepen.io/ErektrycznyLuk/pen/pmbVWz  Ale nie segreguje mi tu poprawnie dystansu i ceny, i nie wiem czemu.

 

Podsunie ktoś jakieś rozwiązanie?