CODEWITHSUNDEEP
javascriptjquerybootstrap-4bootstrap-table
Carolyn Meete
Carolyn Meete

Reputation: 79

How I can sort my table by custom column with jQuery

So I have a bootstrap table and I can sort it by onchange in selectbox. But I want a sort my table by custom column. When I select option 1, I should sort column [1] otherwise column[2] (on selected option 2). Column[1]-Name must be sorted in ascending order, Column[2]-Address in descending order or Who can give me the right method?

<!DOCTYPE html>
<html>

<head>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous">
    </script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
    </script>

</head>

<body>
    <div class="container">
        <div class="row d-flex justify-content-center align-items-center">
            <div class="col-12">
                <select class="m-auto" id="select" onchange="sortTable();">
                    <option value="" disabled selected>SORTING </option>
                    <option value="0">NAMES Ascending</option>
                    <option value="1">ADDRESS Descending</option>
                </select>
            </div>

        </div>
        <div class="row mt-3">
            <div class="col-12">
                <table class="table" id="myTable">
                    <thead>
                        <tr>
                            <th scope="col">#</th>
                            <th scope="col">Name</th>
                            <th scope="col">Address</th>
                            <th scope="col">City</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>1</td>
                            <td>Inna</td>
                            <td>St. Park 3 </td>
                            <td>London</td>
                        </tr>
                        <tr>
                            <td>2</td>
                            <td>Anna</td>
                            <td>Boston Street 4 </td>
                            <td>London</td>
                        </tr>
                        <tr>
                            <td>3</td>
                            <td>Emma</td>
                            <td>Harrow 19 </td>
                            <td>London</td>
                        </tr>
                        <tr>
                            <td>4</td>
                            <td>Chris</td>
                            <td>Antoan Blick 19 </td>
                            <td>London</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</body>

</html>

<script>
    function sortTable() {
        var rows = $("#myTable tbody  tr").get();

        rows.sort(function (a, b) {
            var A = $(a)
                .children("td")
                .eq(1)
                .text()
                .toUpperCase();
            var B = $(b)
                .children("td")
                .eq(2)
                .text()
                .toUpperCase();

            if (A < B) {
                return -1;
            }

            if (A > B) {
                return 1;
            }

            return 0;
        });

        $.each(rows, function (index, row) {
            $("#myTable")
                .children("tbody")
                .append(row);
        });
    }
</script>

Upvotes: 2

Views: 670

Answers (1)

Nur Hossen
Nur Hossen

Reputation: 31

Update your script by following script

function sortTable() {
    var rows = $("#myTable tbody  tr").get();
    var selected_column = $('#select').val();
    selected_column = +selected_column+1;

    rows.sort(function (a, b) {

        var A = $(a)
            .children("td")
            .eq(selected_column)
            .text()
            .toUpperCase();
        var B = $(b)
            .children("td")
            .eq(selected_column)
            .text()
            .toUpperCase();

        if(selected_column==1){
            return ascending(A,B);
        }else if(selected_column==2){
            return descending(A,B);
        }
    });

    $.each(rows, function (index, row) {
        $("#myTable")
            .children("tbody")
            .append(row);
    });
}

function ascending(A,B){
    if (A < B) {
            return -1;
        }

        if (A > B) {
            return 1;
        }

        return 0;
}

function descending(A,B){
    if (A < B) {
            return 1;
        }

        if (A > B) {
            return -1;
        }

        return 0;
}

Upvotes: 1

Related Questions