content logo
Bootstrap Tables: Bootstrap Table with Sorting Animation

Using tables to make the data more organized and the beauty of the site is important and necessary, and many sites today use tables such as the following code, which shows us a table but with a unique feature. There are 4 buttons at the top of the table and by clicking on each of them, in addition to what that button has to do, such as sorting the table data in descending and ascending order, a special animation is displayed.

#Bootstrap Sortable Table # Bootstrap Table Pagination # Bootstrap Table Search # Bootstrap Table Export
<!-- this script got from www.frontendfreecode.com -->
<h1 class="text-center"> Bootstrap Table with Sorting Animation </h1> <div class="mix-btn"> <button class="sort" data-sort="order:asc">Ascending</button> <button class="sort" data-sort="order:desc">Descending</button> <button class="distory-btn">change position</button> <button class="condition-btn">change rank</button> </div> <div class="panel panel-default table-responsive"> <table class="table table-hover table-bordered table-condensed"> <thead> <tr> <th id="head-rank">ID</th> <th id="head-user">User</th> <th id="head-score">point</th> <th id="head-penalty">information</th> <th><a href="">A</a></th> <th><a href="">B</a></th> <th><a href="">C</a></th> <th><a href="">D</a></th> <th><a href="">E</a></th> <th><a href="">F</a></th> <th id="head-total">Total credit</th> </tr> </thead> <tbody id="mix-wrapper"> <tr id="user_11" class="mix-target NCTU" data-order="2"> <td data-type="rank"></td> <td> <a href="/users/11/">11 boy</a> </td> <td data-type="score">--</td> <td data-type="penalty">--</td> <td data-type="problem_10045">--/--</td> <td data-type="problem_10046">--/--</td> <td data-type="problem_10047">--/--</td> <td data-type="problem_10048">--/--</td> <td data-type="problem_10049">--/--</td> <td data-type="problem_10050">--/--</td> <td data-type="total">--/--</td> </tr> <tr id="user_20" class="mix-target NCTU" data-order="3"> <td data-type="rank"></td> <td> <a href="/users/20/">20 boy</a> </td> <td data-type="score">--</td> <td data-type="penalty">--</td> <td data-type="problem_10045">--/--</td> <td data-type="problem_10046">--/--</td> <td data-type="problem_10047">--/--</td> <td data-type="problem_10048">--/--</td> <td data-type="problem_10049">--/--</td> <td data-type="problem_10050">--/--</td> <td data-type="total">--/--</td> </tr> <tr id="user_38" class="mix-target NTU" data-order="4"> <td data-type="rank"></td> <td> <a href="/users/38/">38 boy</a> </td> <td data-type="score">--</td> <td data-type="penalty">--</td> <td data-type="problem_10045">--/--</td> <td data-type="problem_10046">--/--</td> <td data-type="problem_10047">--/--</td> <td data-type="problem_10048">--/--</td> <td data-type="problem_10049">--/--</td> <td data-type="problem_10050">--/--</td> <td data-type="total">--/--</td> </tr> <tr id="user_3" class="mix-target NTU" data-order="1"> <td data-type="rank"></td> <td> <a href="/users/3/">3 boy</a> </td> <td data-type="score">--</td> <td data-type="penalty">--</td> <td data-type="problem_10045">--/--</td> <td data-type="problem_10046">--/--</td> <td data-type="problem_10047">--/--</td> <td data-type="problem_10048">--/--</td> <td data-type="problem_10049">--/--</td> <td data-type="problem_10050">--/--</td> <td data-type="total">--/--</td> </tr> </tbody> <tfoot> <tr id="problem"> <td></td> <td><b>condition</b></td> <td></td> <td></td> <td data-type="problem_10045">10045</td> <td data-type="problem_10046">10046</td> <td data-type="problem_10047">10047</td> <td data-type="problem_10048">10048</td> <td data-type="problem_10049">10049</td> <td data-type="problem_10050">10050</td> <td></td> </tr> </tfoot> </table> </div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a>
.monospace {
    font-family: "Courier New";
}

.computer.only, .mobile.only, .tablet.only {
    display: none;
}

@media only screen and (min-width: 992px) {
    .computer.only {
        display: inline-block;
    }
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
    .tablet.only {
        display: inline-block;
    }
}

@media only screen and (max-width: 768px) {
    .mobile.only {
        display: inline-block;
    }
}

.mix-btn {
    display: flex;
    justify-content: center;
    padding: 20px;
}

    .mix-btn button {
        font-family: "Raleway";
        border: 1px solid pink;
        background: transparent;
        border-radius: 5px;
        margin: 0px 2px;
        padding: 5px 10px;
    }

#mix-wrapper {
    transition: all 3s ease;
}

    #mix-wrapper .mix-target {
        display: none;
    }

@media only screen and (min-width: 992px) {
    td.computer.only, th.computer.only {
        display: table-cell;
    }
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
    td.tablet.only, th.tablet.only {
        display: table-cell;
    }
}

@media only screen and (max-width: 768px) {
    td.mobile.only, th.mobile.only {
        display: table-cell;
    }
}

.panel-body.edit {
    padding: 0px;
}

    .panel-body.edit textarea {
        border: 0px;
        resize: none;
    }

.margin-bottom {
    margin-bottom: 20px;
}

@media only screen and (min-width: 992px) {
    .footer {
        height: 180px;
        margin-top: -180px;
    }
}

body {
    height: 100%;
}

.body {
    min-height: 100%;
    margin-bottom: -180px;
    padding-bottom: 180px;
}

.block {
    border: 1px solid pink;
    height: auto;
}

.panel-default {
    border-color: rgba(251, 218, 98, 0.85);
    border-width: 2px;
}

    .panel-default .panel-heading {
        background: linear-gradient(-250deg, rgba(251, 218, 98, 0.85), rgba(251, 218, 98, 0.85));
    }

.btn {
    transition: all 0.3s ease;
}

    .btn:hover {
        background: rgba(251, 218, 98, 0.85);
        border: 1px solid transparent;
    }

.table-hover > tbody > tr:hover {
    transition: all 0.3s ease;
    background: rgba(251, 218, 98, 0.85);
}
$('#mix-wrapper').mixItUp({
    load: {
        sort: 'order:asc' /* default:asc */
    },
    layout: {
        display: 'table-row'
    },
    animation: {
        effects: 'fade', /* fade scale */
        duration: 700, /* 600 */
    },
    selectors: {
        target: '.mix-target', /* .mix */
        filter: '.filter', /* .filter */
        sort: '.sort' /* .sort */
    },
    callbacks: {
        onMixEnd: function (state) {
            console.log(state) /* null */
        }
    }
});
$('.distory-btn').on("click", function () {
    $('#mix-wrapper').mixItUp('destroy', true);

    $('#mix-wrapper').html('<tr id="user_11" class="mix-target NCTU" data-order="2"><td data-type="rank"></td><td><a href="/users/11/">11 boy</a></td><td data-type="score">--</td><td data-type="penalty">--</td><td data-type="problem_10045">--/--</td><td data-type="problem_10046">--/--</td><td data-type="problem_10047">--/--</td><td data-type="problem_10048">--/--</td><td data-type="problem_10049">--/--</td><td data-type="problem_10050">--/--</td><td data-type="total">--/--</td></tr><tr id="user_3" class="mix-target NCTU" data-order="1"><td data-type="rank"></td><td><a href="/users3/">3 boy</a></td><td data-type="score">--</td><td data-type="penalty">--</td><td data-type="problem_10045">--/--</td><td data-type="problem_10046">--/--</td><td data-type="problem_10047">--/--</td><td data-type="problem_10048">--/--</td><td data-type="problem_10049">--/--</td><td data-type="problem_10050">--/--</td><td data-type="total">--/--</td></tr><tr id="user_20" class="mix-target NCTU" data-order="3"><td data-type="rank"></td><td><a href="/users/20/">20 boy</a></td><td data-type="score">--</td><td data-type="penalty">--</td><td data-type="problem_10045">--/--</td><td data-type="problem_10046">--/--</td><td data-type="problem_10047">--/--</td><td data-type="problem_10048">--/--</td><td data-type="problem_10049">--/--</td><td data-type="problem_10050">--/--</td><td data-type="total">--/--</td><tr id="user_38" class="mix-target NCTU" data-order="4"><td data-type="rank"></td><td><a href="/users/38/">38 boy</a></td><td data-type="score">--</td><td data-type="penalty">--</td><td data-type="problem_10045">--/--</td><td data-type="problem_10046">--/--</td><td data-type="problem_10047">--/--</td><td data-type="problem_10048">--/--</td><td data-type="problem_10049">--/--</td><td data-type="problem_10050">--/--</td><td data-type="total">--/--</td>');

    $('#mix-wrapper').mixItUp({
        load: {
            sort: 'order:asc' /* default:asc */
        },
        layout: {
            display: 'table-row'
        },
        animation: {
            effects: 'fade', /* fade scale */
            duration: 700, /* 600 */
        },
        selectors: {
            target: '.mix-target', /* .mix */
            filter: '.filter', /* .filter */
            sort: '.sort' /* .sort */
        },
        callbacks: {
            onMixEnd: function (state) {
                console.log(state) /* null */
            }
        }
    });
});
$('.condition-btn').on("click", function () {
    $('#mix-wrapper').mixItUp('destroy', true);

    $('#mix-wrapper').html('<tr id="user_11" class="mix-target NCTU" data-order="1"><td data-type="rank"></td><td><a href="/users/11/">11 boy</a></td><td data-type="score">--</td><td data-type="penalty">--</td><td data-type="problem_10045">--/--</td><td data-type="problem_10046">--/--</td><td data-type="problem_10047">--/--</td><td data-type="problem_10048">--/--</td><td data-type="problem_10049">--/--</td><td data-type="problem_10050">--/--</td><td data-type="total">--/--</td></tr><tr id="user_3" class="mix-target NCTU" data-order="2"><td data-type="rank"></td><td><a href="/users3/">3 boy</a></td><td data-type="score">--</td><td data-type="penalty">--</td><td data-type="problem_10045">--/--</td><td data-type="problem_10046">--/--</td><td data-type="problem_10047">--/--</td><td data-type="problem_10048">--/--</td><td data-type="problem_10049">--/--</td><td data-type="problem_10050">--/--</td><td data-type="total">--/--</td></tr><tr id="user_20" class="mix-target NCTU" data-order="4"><td data-type="rank"></td><td><a href="/users/20/">20 boy</a></td><td data-type="score">--</td><td data-type="penalty">--</td><td data-type="problem_10045">--/--</td><td data-type="problem_10046">--/--</td><td data-type="problem_10047">--/--</td><td data-type="problem_10048">--/--</td><td data-type="problem_10049">--/--</td><td data-type="problem_10050">--/--</td><td data-type="total">--/--</td><tr id="user_38" class="mix-target NCTU" data-order="3"><td data-type="rank"></td><td><a href="/users/38/">38 boy</a></td><td data-type="score">--</td><td data-type="penalty">--</td><td data-type="problem_10045">--/--</td><td data-type="problem_10046">--/--</td><td data-type="problem_10047">--/--</td><td data-type="problem_10048">--/--</td><td data-type="problem_10049">--/--</td><td data-type="problem_10050">--/--</td><td data-type="total">--/--</td>');

    $('#mix-wrapper').mixItUp({
        load: {
            //sort: 'order:asc' /* default:asc */
        },
        layout: {
            display: 'table-row'
        },
        animation: {
            effects: 'fade', /* fade scale */
            duration: 700, /* 600 */
        },
        selectors: {
            target: '.mix-target', /* .mix */
            filter: '.filter', /* .filter */
            sort: '.sort' /* .sort */
        },
        callbacks: {
            onMixEnd: function (state) {
                console.log(state) /* null */
            }
        }
    });
    setTimeout(function () {
        $('#mix-wrapper').mixItUp('sort', 'order:asc'); /* default:asc */
    }, 1500);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js?v=2.1.9'></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- this script got from www.frontendfreecode.com -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdn.jsdelivr.net/jquery.mixitup/latest/jquery.mixitup.min.js?v=2.1.9'></script>
<style>
.monospace {
    font-family: "Courier New";
}

.computer.only, .mobile.only, .tablet.only {
    display: none;
}

@media only screen and (min-width: 992px) {
    .computer.only {
        display: inline-block;
    }
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
    .tablet.only {
        display: inline-block;
    }
}

@media only screen and (max-width: 768px) {
    .mobile.only {
        display: inline-block;
    }
}

.mix-btn {
    display: flex;
    justify-content: center;
    padding: 20px;
}

    .mix-btn button {
        font-family: "Raleway";
        border: 1px solid pink;
        background: transparent;
        border-radius: 5px;
        margin: 0px 2px;
        padding: 5px 10px;
    }

#mix-wrapper {
    transition: all 3s ease;
}

    #mix-wrapper .mix-target {
        display: none;
    }

@media only screen and (min-width: 992px) {
    td.computer.only, th.computer.only {
        display: table-cell;
    }
}

@media only screen and (min-width: 768px) and (max-width: 992px) {
    td.tablet.only, th.tablet.only {
        display: table-cell;
    }
}

@media only screen and (max-width: 768px) {
    td.mobile.only, th.mobile.only {
        display: table-cell;
    }
}

.panel-body.edit {
    padding: 0px;
}

    .panel-body.edit textarea {
        border: 0px;
        resize: none;
    }

.margin-bottom {
    margin-bottom: 20px;
}

@media only screen and (min-width: 992px) {
    .footer {
        height: 180px;
        margin-top: -180px;
    }
}

body {
    height: 100%;
}

.body {
    min-height: 100%;
    margin-bottom: -180px;
    padding-bottom: 180px;
}

.block {
    border: 1px solid pink;
    height: auto;
}

.panel-default {
    border-color: rgba(251, 218, 98, 0.85);
    border-width: 2px;
}

    .panel-default .panel-heading {
        background: linear-gradient(-250deg, rgba(251, 218, 98, 0.85), rgba(251, 218, 98, 0.85));
    }

.btn {
    transition: all 0.3s ease;
}

    .btn:hover {
        background: rgba(251, 218, 98, 0.85);
        border: 1px solid transparent;
    }

.table-hover > tbody > tr:hover {
    transition: all 0.3s ease;
    background: rgba(251, 218, 98, 0.85);
}
</style>

</head>
<body>
<h1 class="text-center">
    Bootstrap Table with Sorting Animation
</h1>
<div class="mix-btn">
    <button class="sort" data-sort="order:asc">Ascending</button>
    <button class="sort" data-sort="order:desc">Descending</button>
    <button class="distory-btn">change position</button>
    <button class="condition-btn">change rank</button>
</div>

<div class="panel panel-default table-responsive">
    <table class="table table-hover table-bordered table-condensed">
        <thead>
            <tr>
                <th id="head-rank">ID</th>
                <th id="head-user">User</th>
                <th id="head-score">point</th>
                <th id="head-penalty">information</th>
                <th><a href="">A</a></th>
                <th><a href="">B</a></th>
                <th><a href="">C</a></th>
                <th><a href="">D</a></th>
                <th><a href="">E</a></th>
                <th><a href="">F</a></th>
                <th id="head-total">Total credit</th>
            </tr>
        </thead>
        <tbody id="mix-wrapper">
            <tr id="user_11" class="mix-target NCTU" data-order="2">
                <td data-type="rank"></td>
                <td>
                    <a href="/users/11/">11 boy</a>
                </td>
                <td data-type="score">--</td>
                <td data-type="penalty">--</td>
                <td data-type="problem_10045">--/--</td>
                <td data-type="problem_10046">--/--</td>
                <td data-type="problem_10047">--/--</td>
                <td data-type="problem_10048">--/--</td>
                <td data-type="problem_10049">--/--</td>
                <td data-type="problem_10050">--/--</td>
                <td data-type="total">--/--</td>
            </tr>
            <tr id="user_20" class="mix-target NCTU" data-order="3">
                <td data-type="rank"></td>
                <td>
                    <a href="/users/20/">20 boy</a>
                </td>
                <td data-type="score">--</td>
                <td data-type="penalty">--</td>
                <td data-type="problem_10045">--/--</td>
                <td data-type="problem_10046">--/--</td>
                <td data-type="problem_10047">--/--</td>
                <td data-type="problem_10048">--/--</td>
                <td data-type="problem_10049">--/--</td>
                <td data-type="problem_10050">--/--</td>
                <td data-type="total">--/--</td>
            </tr>
            <tr id="user_38" class="mix-target NTU" data-order="4">
                <td data-type="rank"></td>
                <td>
                    <a href="/users/38/">38 boy</a>
                </td>
                <td data-type="score">--</td>
                <td data-type="penalty">--</td>
                <td data-type="problem_10045">--/--</td>
                <td data-type="problem_10046">--/--</td>
                <td data-type="problem_10047">--/--</td>
                <td data-type="problem_10048">--/--</td>
                <td data-type="problem_10049">--/--</td>
                <td data-type="problem_10050">--/--</td>
                <td data-type="total">--/--</td>
            </tr>
            <tr id="user_3" class="mix-target NTU" data-order="1">
                <td data-type="rank"></td>
                <td>
                    <a href="/users/3/">3 boy</a>
                </td>
                <td data-type="score">--</td>
                <td data-type="penalty">--</td>
                <td data-type="problem_10045">--/--</td>
                <td data-type="problem_10046">--/--</td>
                <td data-type="problem_10047">--/--</td>
                <td data-type="problem_10048">--/--</td>
                <td data-type="problem_10049">--/--</td>
                <td data-type="problem_10050">--/--</td>
                <td data-type="total">--/--</td>
            </tr>
        </tbody>
        <tfoot>
            <tr id="problem">
                <td></td>
                <td><b>condition</b></td>
                <td></td>
                <td></td>
                <td data-type="problem_10045">10045</td>
                <td data-type="problem_10046">10046</td>
                <td data-type="problem_10047">10047</td>
                <td data-type="problem_10048">10048</td>
                <td data-type="problem_10049">10049</td>
                <td data-type="problem_10050">10050</td>
                <td></td>
            </tr>
        </tfoot>
    </table>
</div>
<div id="bcl"><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Code</a></div>
<script>
$('#mix-wrapper').mixItUp({
    load: {
        sort: 'order:asc' /* default:asc */
    },
    layout: {
        display: 'table-row'
    },
    animation: {
        effects: 'fade', /* fade scale */
        duration: 700, /* 600 */
    },
    selectors: {
        target: '.mix-target', /* .mix */
        filter: '.filter', /* .filter */
        sort: '.sort' /* .sort */
    },
    callbacks: {
        onMixEnd: function (state) {
            console.log(state) /* null */
        }
    }
});
$('.distory-btn').on("click", function () {
    $('#mix-wrapper').mixItUp('destroy', true);

    $('#mix-wrapper').html('<tr id="user_11" class="mix-target NCTU" data-order="2"><td data-type="rank"></td><td><a href="/users/11/">11 boy</a></td><td data-type="score">--</td><td data-type="penalty">--</td><td data-type="problem_10045">--/--</td><td data-type="problem_10046">--/--</td><td data-type="problem_10047">--/--</td><td data-type="problem_10048">--/--</td><td data-type="problem_10049">--/--</td><td data-type="problem_10050">--/--</td><td data-type="total">--/--</td></tr><tr id="user_3" class="mix-target NCTU" data-order="1"><td data-type="rank"></td><td><a href="/users3/">3 boy</a></td><td data-type="score">--</td><td data-type="penalty">--</td><td data-type="problem_10045">--/--</td><td data-type="problem_10046">--/--</td><td data-type="problem_10047">--/--</td><td data-type="problem_10048">--/--</td><td data-type="problem_10049">--/--</td><td data-type="problem_10050">--/--</td><td data-type="total">--/--</td></tr><tr id="user_20" class="mix-target NCTU" data-order="3"><td data-type="rank"></td><td><a href="/users/20/">20 boy</a></td><td data-type="score">--</td><td data-type="penalty">--</td><td data-type="problem_10045">--/--</td><td data-type="problem_10046">--/--</td><td data-type="problem_10047">--/--</td><td data-type="problem_10048">--/--</td><td data-type="problem_10049">--/--</td><td data-type="problem_10050">--/--</td><td data-type="total">--/--</td><tr id="user_38" class="mix-target NCTU" data-order="4"><td data-type="rank"></td><td><a href="/users/38/">38 boy</a></td><td data-type="score">--</td><td data-type="penalty">--</td><td data-type="problem_10045">--/--</td><td data-type="problem_10046">--/--</td><td data-type="problem_10047">--/--</td><td data-type="problem_10048">--/--</td><td data-type="problem_10049">--/--</td><td data-type="problem_10050">--/--</td><td data-type="total">--/--</td>');

    $('#mix-wrapper').mixItUp({
        load: {
            sort: 'order:asc' /* default:asc */
        },
        layout: {
            display: 'table-row'
        },
        animation: {
            effects: 'fade', /* fade scale */
            duration: 700, /* 600 */
        },
        selectors: {
            target: '.mix-target', /* .mix */
            filter: '.filter', /* .filter */
            sort: '.sort' /* .sort */
        },
        callbacks: {
            onMixEnd: function (state) {
                console.log(state) /* null */
            }
        }
    });
});
$('.condition-btn').on("click", function () {
    $('#mix-wrapper').mixItUp('destroy', true);

    $('#mix-wrapper').html('<tr id="user_11" class="mix-target NCTU" data-order="1"><td data-type="rank"></td><td><a href="/users/11/">11 boy</a></td><td data-type="score">--</td><td data-type="penalty">--</td><td data-type="problem_10045">--/--</td><td data-type="problem_10046">--/--</td><td data-type="problem_10047">--/--</td><td data-type="problem_10048">--/--</td><td data-type="problem_10049">--/--</td><td data-type="problem_10050">--/--</td><td data-type="total">--/--</td></tr><tr id="user_3" class="mix-target NCTU" data-order="2"><td data-type="rank"></td><td><a href="/users3/">3 boy</a></td><td data-type="score">--</td><td data-type="penalty">--</td><td data-type="problem_10045">--/--</td><td data-type="problem_10046">--/--</td><td data-type="problem_10047">--/--</td><td data-type="problem_10048">--/--</td><td data-type="problem_10049">--/--</td><td data-type="problem_10050">--/--</td><td data-type="total">--/--</td></tr><tr id="user_20" class="mix-target NCTU" data-order="4"><td data-type="rank"></td><td><a href="/users/20/">20 boy</a></td><td data-type="score">--</td><td data-type="penalty">--</td><td data-type="problem_10045">--/--</td><td data-type="problem_10046">--/--</td><td data-type="problem_10047">--/--</td><td data-type="problem_10048">--/--</td><td data-type="problem_10049">--/--</td><td data-type="problem_10050">--/--</td><td data-type="total">--/--</td><tr id="user_38" class="mix-target NCTU" data-order="3"><td data-type="rank"></td><td><a href="/users/38/">38 boy</a></td><td data-type="score">--</td><td data-type="penalty">--</td><td data-type="problem_10045">--/--</td><td data-type="problem_10046">--/--</td><td data-type="problem_10047">--/--</td><td data-type="problem_10048">--/--</td><td data-type="problem_10049">--/--</td><td data-type="problem_10050">--/--</td><td data-type="total">--/--</td>');

    $('#mix-wrapper').mixItUp({
        load: {
            //sort: 'order:asc' /* default:asc */
        },
        layout: {
            display: 'table-row'
        },
        animation: {
            effects: 'fade', /* fade scale */
            duration: 700, /* 600 */
        },
        selectors: {
            target: '.mix-target', /* .mix */
            filter: '.filter', /* .filter */
            sort: '.sort' /* .sort */
        },
        callbacks: {
            onMixEnd: function (state) {
                console.log(state) /* null */
            }
        }
    });
    setTimeout(function () {
        $('#mix-wrapper').mixItUp('sort', 'order:asc'); /* default:asc */
    }, 1500);
});
</script>

</body>
</html>
Preview