patrickkunka / mixitup

A high-performance, dependency-free library for animated filtering, sorting, insertion, removal and more
https://www.kunkalabs.com/mixitup/
4.52k stars 734 forks source link

Combining multi filter and pagination with url filtering unsecsessful #606

Open macreixa opened 1 year ago

macreixa commented 1 year ago

Hello, I was able to implement URL filtering based on your tutorial, but when I tried to integrate it with multifiltering and pagination, I was unsuccessful.

I leave here the code that is working ok (without url filtering), can you lead me to a solution, as the instructions I found online were not effective.

<section id="filters" class="filterbox main-grid">
    <form class="controls">
        <div class="control-search">
            <fieldset data-filter-group>
                <input type="text" data-search-attribute="class" placeholder="Search"/>
            </fieldset>
        </div>
        <fieldset data-filter-group class="select-wrapper">
            <select>
                <option value="">Tipos de Massa</option>
                <option value=".massa-acucarada">Massa Açucarada</option>
                <option value=".massa-batida">Massa Batida</option>
                <option value=".massa-brioche">Massa Brioche</option>
                <option value=".massa-choux">Massa Choux</option>
                <option value=".massa-de-restos">Massa de Restos</option>
                <option value=".massa-folhada">Massa Folhada</option>
                <option value=".outras-massas">Outras Massas</option>
            </select>
        </fieldset>
        <fieldset data-filter-group class="select-wrapper">
            <select>
                <option value="">A—Z</option>
                <option value=".a-">A</option>
                <option value=".b-">B</option>
                <option value=".c-">C</option>
                <option value=".d-">D</option>
                <option value=".e-">E</option>
                <option value=".f-">F</option>
                <option value=".g-">G</option>
                <option value=".h-">H</option>
                <option value=".i-">I</option>
                <option value=".j-">J</option>
                <option value=".k-">K</option>
                <option value=".l-">L</option>
                <option value=".m-">M</option>
                <option value=".n-">N</option>
                <option value=".o-">O</option>
                <option value=".p-">P</option>
                <option value=".q-">Q</option>
                <option value=".r-">R</option>
                <option value=".s-">S</option>
                <option value=".t-">T</option>
                <option value=".u-">U</option>
                <option value=".v-">V</option>
                <option value=".w-">W</option>
                <option value=".x-">X</option>
                <option value=".y-">Y</option>
                <option value=".z-">Z</option>
            </select>
        </fieldset>
        <div class="control-group">
            <button type="button" class="control control-sort" data-sort="default:desc">&darr;</button>
            <button type="button" class="control control-sort" data-sort="default:asc">&uarr;</button>
        </div>
        <button type="reset" class="control control-text">&times;</button>
    </form>
</section>
<!-- /FILTER ENCYCLOPEDIA -->

<section class="main-grid list-encyclopedia container">
    (...)
</section>

thank you