Sorting A Table With Tabs & Javascript

Question

I'm hoping someone can help me out. I have created a table and have multiple Tabs. Each Tab has different data inside the table. Each table row has a column with a number of votes and I want to sort the rows automatically with the columns that have more votes at the top.

This is my HTML code:

    <div class="row" style="text-align: center;">
        <div class="container" style="margin-top: 8%;">

            <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">

                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="pills-comedy-tab" data-bs-toggle="pill" data-bs-target="#pills-comedy" type="button" role="tab" aria-controls="pills-comedy" aria-selected="false">COMEDY MOVIES</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="pills-horror-tab" data-bs-toggle="pill" data-bs-target="#pills-horror" type="button" role="tab" aria-controls="pills-horror" aria-selected="false">HORROR MOVIES</button>
                </li>
            </ul>
            <div class="tab-content" id="pills-tabContent">

                <!--START OF COMEDY MOVIES TAB-->
                <div class="tab-pane fade show active" id="pills-comedy" role="tabpanel" aria-labelledby="pills-comedy-tab">

                    <table class="table">
                        <thead>

                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">Name</th>
                                <th scope="col">Director</th>
                                <th scope="col" class="d-none d-md-table-cell">Starring</th>
                                <th scope="col">Votes</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th scope="row">1</th>
                                <td>Hot Rod</td>
                                <td>Akiva Schafer</td>
                                <td class="d-none d-md-table-cell">Andy Samberg</td>
                                <td><span class="vote">38</span></td>
                                <td> <button type="button" class="btn btn-primary">UPVOTE</button></td>

                                </td>
                            </tr>
                            <tr>
                                <th scope="row">2</th>
                                <td>Game Night</td>
                                <td>Jonathon Goldstein</td>
                                <td class="d-none d-md-table-cell">Jason Bateman</td>
                                <td><span class="vote">99</span></td>
                                <td> <button type="button" class="btn btn-primary">UPVOTE</button></td>
                            </tr>
                            <tr>
                                <th scope="row">3</th>
                                <td>The First Wives Club</td>
                                <td>Hugh Wilson</td>
                                <td class="d-none d-md-table-cell">Keenan Wayans</td>
                                <td><span class="vote">21</span></td>
                                <td> <button type="button" class="btn btn-primary">UPVOTE</button></td>
                            </tr>
                            <tr>
                                <th scope="row">4</th>
                                <td>Scary Movie</td>
                                <td>Keenan Wayans</td>
                                <td class="d-none d-md-table-cell">Marlon Wayons</td>
                                <td><span class="vote">1</span></td>
                                <td> <button type="button" class="btn btn-primary">UPVOTE</button></td>
                            </tr>
                            <tr>
                                <th scope="row">5</th>
                                <td>Blockers</td>
                                <td>Kay Cannon</td>
                                <td class="d-none d-md-table-cell">Leslie Mann</td>
                                <td><span class="vote">11</span></td>
                                <td> <button type="button" class="btn btn-primary">UPVOTE</button></td>
                            </tr>
                            <tr>
                                <th scope="row">6</th>
                                <td>The Bank Dick</td>
                                <td>Eddie Cline</td>
                                <td class="d-none d-md-table-cell">W.C Fields</td>
                                <td><span class="vote">87</span></td>
                                <td> <button type="button" class="btn btn-primary">UPVOTE</button></td>
                            </tr>
                            <tr>
                                <th scope="row">7</th>
                                <td>Mrs Doubtfire</td>
                                <td>Chris Columbus</td>
                                <td class="d-none d-md-table-cell">Robin Williams</td>
                                <td><span class="vote">38</span></td>
                                <td> <button type="button" class="btn btn-primary">UPVOTE</button></td>
                            </tr>
                        </tbody>
                    </table>



                </div>
                <!--END OF COMEDY MOVIES TAB-->


                <!--START OF HORROR MOVIES TAB-->
                <div class="tab-pane fade" id="pills-horror" role="tabpanel" aria-labelledby="pills-horror-tab">

                    <table class="table">
                        <thead>
                            <tr>
                                <th scope="col">#</th>
                                <th scope="col">Name</th>
                                <th scope="col">Director</th>
                                <th scope="col" class="d-none d-md-table-cell">Starring</th>
                                <th scope="col">Votes</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <th scope="row">1</th>
                                <td>Acacia</td>
                                <td>Park Ki-Young</td>
                                <td class="d-none d-md-table-cell">$50,000,000</td>
                                <td><span class="vote">38</span></td>
                                <td> <button type="button" class="btn btn-primary">UPVOTE</button></td>
                            </tr>

                            <tr>
                                <th scope="row">2</th>
                                <td>Dead End</td>
                                <td>Fabrise Canepa</td>
                                <td class="d-none d-md-table-cell">Ray Wise</td>
                                <td><span class="vote">38</span></td>
                                <td> <button type="button" class="btn btn-primary">UPVOTE</button></td>
                            </tr>
                            <tr>
                                <th scope="row">3</th>
                                <td>Malefic</td>
                                <td>Steve Sessions</td>
                                <td class="d-none d-md-table-cell">Cynder moon</td>
                                <td><span class="vote">99</span></td>
                                <td> <button type="button" class="btn btn-primary">UPVOTE</button></td>
                            </tr>
                            <tr>
                                <th scope="row">4</th>
                                <td>Love Object</td>
                                <td>Robert Parigi</td>
                                <td class="d-none d-md-table-cell">Udo Kier</td>
                                <td><span class="vote">125</span></td>
                                <td> <button type="button" class="btn btn-primary">UPVOTE</button></td>
                            </tr>
                            <tr>
                                <th scope="row">5</th>
                                <td>Jeepers Creepers II</td>
                                <td>Victor Salva</td>
                                <td class="d-none d-md-table-cell">Jonathan Breck</td>
                                <td><span class="vote">3368</span></td>
                                <td> <button type="button" class="btn btn-primary">UPVOTE</button></td>
                            </tr>
                            <tr>
                                <th scope="row">6</th>
                                <td>Into The Mirror</td>
                                <td>Kim Sung-Ho</td>
                                <td class="d-none d-md-table-cell">Yoo Ji-Tae</td>
                                <td><span class="vote">380</span></td>
                                <td> <button type="button" class="btn btn-primary">UPVOTE</button></td>
                            </tr>
                            <tr>
                                <th scope="row">7</th>
                                <td>Threshold</td>
                                <td>Chuck Bowman</td>
                                <td class="d-none d-md-table-cell">Nicholas lea</td>
                                <td><span class="vote">32</span></td>
                                <td> <button type="button" class="btn btn-primary">UPVOTE</button></td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!--END OF HORROR MOVIES TAB-->
            </div>

        </div>



    </div>




</div>

This is the Javacript code I am using to sort by the vote column

$(document).ready(function(e) {
    var dataRows = [];

    //Create an array of all rows with its value (this assumes that the amount is always a number.  You should add error checking!!  Also assumes that all rows are data rows, and that there are no header rows.  Adjust selector appropriately.
    $('tr').each(function(i, j) {
        dataRows.push({ 'vote': parseFloat($(this).find('.vote').text()), 'row': $(this) });
    })

    //Sort the data smallest to largest
    dataRows.sort(function(a, b) {
        return b.vote - a.vote;
    });

    //Remove existing table rows.  This assumes that everything should be deleted, adjust selector if needed :).

    $('table').empty();

    //Add rows back to table in the correct order.
    dataRows.forEach(function(ele) {
        $('table').append(ele.row);
    })
});

So What I have noticed is if I run this code it does sort by column, but it also removes the table from the HORROR TAB and places inside the COMEDY TAB and makes duplicates. If I remove the tabs then everything is fine. So something somewhere is messing with the sorting by having tabs and i just can't figure out whats going on.

I could really use some help, i've been trying to figure this out for days. Thanks guys

Answer 1

Having separate arrays for each tab(comedy and horror) worked for me, so you just create a second array and duplicate the javascript functions, using more specific JS selectors.

var dataRows1 = []
var dataRows2 = []
function sortRows() {

    //Create an array of all rows with its value (this assumes that the amount is always a number.  You should add error checking!!  Also assumes that all rows are data rows, and that there are no header rows.  Adjust selector appropriately.
    $('#pills-comedy tr').each(function () {
        dataRows1.push({
            'vote': parseFloat($(this).find('.vote').text()),
            'row': $(this)
        });
    })
    $('#pills-horror tr').each(function () {
        dataRows2.push({
            'vote': parseFloat($(this).find('.vote').text()),
            'row': $(this)
        });
    })

    //Sort the data smallest to largest
    dataRows1.sort(function (a, b) {
        return b.vote - a.vote;
    });
    dataRows2.sort(function (a, b) {
        return b.vote - a.vote;
    });

    //Remove existing table rows.  This assumes that everything should be deleted, adjust selector if needed :).

    $('#pills-comedy table').empty();
    $('#pills-horror table').empty();

    //Add rows back to table in the correct order.
    dataRows1.forEach(function (ele) {
        $('#pills-comedy table').append(ele.row);
    })
    dataRows2.forEach(function (ele) {
        $('#pills-horror table').append(ele.row);
    })
};

This works for what you intended, but at least here it's still breaking some of the Bootstrap layout and I'm not sure why now, need to dig into this.