Arranging Data in a Table using Tabs and JavaScript

Question

Arranging Data in a Table using Tabs and JavaScript

I am seeking assistance with a table I created that has multiple tabs containing different data. Each tab displays different information within the table rows, including a column for the number of votes. I am looking to automatically sort the rows based on the number of votes, with the highest vote counts appearing at the top.

Below 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>
                            ...
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            ...
                        </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>
                            ...
                        </thead>
                        <tbody>
                            <tr>
                                ...
                            </tr>
                            ...
                        </tbody>
                    </table>
                </div>
                <!--END OF HORROR MOVIES TAB-->
            </div>

        </div>



    </div>




</div>

This is the JavaScript code I am utilizing 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);
    })
});

After running this code, I noticed that it sorts the columns but also relocates the table from the HORROR TAB to the COMEDY TAB, creating duplicates. When I remove the tabs, the sorting works fine. There seems to be a conflict with the tabs impacting the sorting process, and I am struggling to identify the issue.

I would greatly appreciate any guidance as I have been trying to resolve this for days. Thank you.

javascript sorting html-table bootstrap-5

Answer 1

Answer №1

My solution involved creating separate arrays for each tab (comedy and horror), allowing for a more organized approach. By duplicating the JavaScript functions and using specific selectors, I was able to efficiently handle the data.

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

    //Create an array of all rows with their values
    $('#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 from 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
    $('#pills-comedy table').empty();
    $('#pills-horror table').empty();

    //Add rows back to the 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);
    })
};

While this method achieved the desired outcome, it did cause some unexpected layout issues within the Bootstrap framework. Further investigation is needed to address these issues.

Answer 2

My solution involved creating separate arrays for each tab (comedy and horror), allowing for a more organized approach. By duplicating the JavaScript functions and using specific selectors, I was able to efficiently handle the data.

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

    //Create an array of all rows with their values
    $('#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 from 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
    $('#pills-comedy table').empty();
    $('#pills-horror table').empty();

    //Add rows back to the 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);
    })
};

While this method achieved the desired outcome, it did cause some unexpected layout issues within the Bootstrap framework. Further investigation is needed to address these issues.

Arranging Data in a Table using Tabs and JavaScript

Answer №1

Similar questions

Vue.js computed property experiencing a minor setback

React.js: Passing an array as a property to an element results in the transformation of the array into an object

Guide on converting JSON data into a PDF using TypeScript

After submitting the form, React checkboxes fail to reset their state

What is the reason `addEventListener` does not work with a class method?

Unable to See Success Notification on First Attempt

What is the best way to select the initial element from my class within my component using protractor?

Providing parameters to a dynamic component within NextJS

Having trouble with sending a list of items from a VueJS form

Callback in React Setstate triggered, leading to a delay in rendering

When using Next JS with StoryBook, an error may occur if styles are written in a module.scss file

Error: Attempting to access property 'question' of an undefined value

Unable to render dynamic ID in Next.js version 13.4.6 due to an issue

Choose information based on the prior choice made

How to obtain the value of TR in JavaScript?

unable to retrieve JSON sub-elements

Using the JavaScript JSX syntax, apply the map function to the result of a

Is there a way to deactivate all dot inputs on number type input in vue.js 2?

jQuery unable to find designated elements in uploaded templates

TypeError: "Table" has not been declared