Bootstrap Tables:

Bootstrap Table with Sorting Animation

Tables are considered as one of the primary elements of web design today. They are a great and useful tool for HTML documents and web pages. Tables are pretty flexible and can be designed in many different ways. This means that they can be used for many different functions as well. Using tables in your website gives you more control over the page layout which lets you design more visually interesting pages with creative layouts. You can use tables in different sections of a website for different purposes. With that said, creating a proper table with professional features can be a difficult process especially for novice websites. Due to this fact, a good number of templates are available for you to use which can certainly set you up until you get started.

Speaking of templates, here is a Bootstrap sortable table with many great features for more functionality. The design is pretty basic and minimalistic but it has a special feature. There are 4 buttons available at the top of this Bootstrap table pagination template. By pressing each of them, you can control the sorting options of the table. Unfortunately, it does not feature any Bootstrap table search or Bootstrap table export options but it can still prove useful in many scenarios.

Bootstrap Sortable Table

Bootstrap Table Pagination

Bootstrap Table Search

Bootstrap Table Export

<!-- This script got from 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://frontendfreecode.com">Free Frontend</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 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;" href="http://www.devanswer.com">Free Frontend</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

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS