Usare MixItUp con AJAX

Ultimamente, in alcuni progetti, sto usando MixItUp.

Un'ottima libreria per filtrare e ordinare i dati dentro una pagina.

Di default, si aspetta che i dati siano già caricati dentro la pagina quando il plugin viene inizializzato.

A me, però, serviva caricare i dati tramite AJAX.

E' possibile farlo con un piccolo workaround.

Tralascio gli esempi e l'HTML di base; sono gli stessi, l'unica cosa che cambia è l'inizializzazione della libreria.

Al click su un bottone faccio questo:

function getDatas() {
    $.ajax({
        type: "POST",
        dataType: "html",
        url: "dati.php",
        success: function (res) {
            document.querySelector('#mixit').innerHTML = res;
            try {
                $('#mixit').mixItUp('destroy');
            } catch (x) {
            }
            $('#mixit').mixItUp();
        }
    });
}

Praticamente, dopo aver recuperato i dati e immessi nella pagina, faccio un destroy della libreria, per poi ricrearla.

In questo modo non ho la necessità che i dati siano caricati nel momento della creazione della pagina, come lui si aspetta.

A questo basta aggiungere l'HTML per la libreria per i filtri, ecc; questi possono essere statici.

Enjoy!