Urgent Help need with JS datatable logic

JavaScript
1

Key Points of Your Requirement:
Date Sorting: Actual dates should be sorted normally.
Empty Cells: Date Empty cells or data-sort=“01-Jan-3000” should always be at the bottom of the list.
Behavior Consistency: This behavior should be consistent across both ascending and descending sorts.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DataTable Example</title>
    <!-- Include jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <!-- Include DataTables CSS and JS -->
    <link rel="stylesheet" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
    <script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
</head>
<body>
    <table id="meds-condition" tabindex="-1"
           class="table--base js-datatable js-table--sorting js-datatable--pagination dataTable no-footer"
           data-page-length="25" data-sZeroRecords='No information available'
           data-sort-order='[
               [[0, "asc"],[3, "desc"]],
               [[1, "asc"],[3, "desc"],[0, "asc"]],
               [[3, "asc"],[0, "asc"]],
               [[3, "asc"],[0, "asc"]]
           ]'>
        <thead>
            <tr>
                <th class="cell-width-45p">Name</th>
                <th class="cell-width-15p table__colnosort">Date of Onset</th>
                <th class="cell-width-25p table__colnosort">Source Author</th>
                <th class="cell-width-15p">Document Date</th>
            </tr>
        </thead>
        <tbody>
            <!-- Example rows, replace these with your actual data -->
			<tr data-href="javascript:void(0);" data-doctype="100.16645" data-sly-test.repoIdHypenDocId="2-2" data-sly-test.repoIdSlashDocId="2/2">
                <td data-th="Name" class="cell-width-16p">Condition 2</td>
                <td data-th="Date of Onset" data-sort="13-Feb-2024" class="cell-width-16p">13-Feb-2024</td>
                <td data-th="Source Author" class="cell-width-16p">Author 2</td>
                <td data-th="Document Date" data-sort="15-Feb-2023" class="cell-width-16p">15-Feb-2023</td>
            </tr>
            
			
			<tr data-href="javascript:void(0);" data-doctype="100.16645" data-sly-test.repoIdHypenDocId="2-2" data-sly-test.repoIdSlashDocId="2/2">
                <td data-th="Name" class="cell-width-16p">ACondition 2</td>
                <td data-th="Date of Onset" data-sort="14-Feb-2024" class="cell-width-16p">14-Feb-2024</td>
                <td data-th="Source Author" class="cell-width-16p">Author 2</td>
                <td data-th="Document Date" data-sort="15-Feb-2023" class="cell-width-16p">15-Feb-2023</td>
            </tr>
			
            
			<tr data-href="javascript:void(0);" data-doctype="100.16644" data-sly-test.repoIdHypenDocId="1-1" data-sly-test.repoIdSlashDocId="1/1">
                <td data-th="Name" class="cell-width-16p">Condition 1</td>
                <td data-th="Date of Onset" data-sort="01-Jan-3000" class="cell-width-16p"></td>
                <td data-th="Source Author" class="cell-width-16p">Author 1</td>
                <td data-th="Document Date" data-sort="01-Jan-2024" class="cell-width-16p">01-Jan-2024</td>
            </tr>
			<tr data-href="javascript:void(0);" data-doctype="100.16644" data-sly-test.repoIdHypenDocId="1-1" data-sly-test.repoIdSlashDocId="1/1">
                <td data-th="Name" class="cell-width-16p">Condition 1</td>
                <td data-th="Date of Onset" data-sort="01-Jan-3000" class="cell-width-16p"></td>
                <td data-th="Source Author" class="cell-width-16p">Author 1</td>
                <td data-th="Document Date" data-sort="01-Jan-2024" class="cell-width-16p">01-Jan-2024</td>
            </tr>

			<tr data-href="javascript:void(0);" data-doctype="100.16644" data-sly-test.repoIdHypenDocId="1-1" data-sly-test.repoIdSlashDocId="1/1">
                <td data-th="Name" class="cell-width-16p">Condition 1</td>
                <td data-th="Date of Onset" data-sort="01-Jan-3000" class="cell-width-16p"></td>
                <td data-th="Source Author" class="cell-width-16p">Author 1</td>
                <td data-th="Document Date" data-sort="01-Jan-2024" class="cell-width-16p">01-Jan-2024</td>
            </tr>
			
            <!-- Add more rows as needed -->
        </tbody>
    </table>

    <script>
        (function() {
            'use strict';

            $(document).ready(function() {
                var $tableElement = $('#meds-condition');
                var table;

                // Initialize DataTable if not already initialized
                 if ($.fn.DataTable.isDataTable('#meds-condition')) {
                    table = $tableElement.DataTable();
                } else {
                    table = $tableElement.DataTable({
                        "order": [[0, 'asc']], // Default sorting by the second column (Date)
                    });
                }

                // Store removed rows temporarily
                var removedRows = [];

                // Custom function to handle row removal, sorting, and re-adding
                function handleSpecialRows() {
                    // Step 1: Collect and remove rows with data-sort="01-Jan-3000"
                    removedRows = []; // Reset removed rows array

                    // Collect rows to be removed
                    table.rows().nodes().to$().each(function() {
                        var $row = $(this);
                        var $td = $row.find('td:eq(1)'); // Target the second column (Date)
                        var dataSort = $td.attr('data-sort');

                        // Check if data-sort is '01-Jan-3000'
                        if (dataSort === '01-Jan-3000') {
                            removedRows.push($row); // Store the row jQuery object
                            table.row($row).remove(); // Remove the row from DataTable
                        }
                    });

                    // Step 2: Redraw the table to reflect the changes
                    table.draw();

                    // Step 3: Append removed rows to the bottom
                    if (removedRows.length) {
                        
                    }
                }

                // Bind custom function to header click and keypress
                $(document).on('click keypress', '#meds-condition_wrapper thead tr th:nth-of-type(2)', function(event) {
                    if (event.type === 'click' || event.which === 13) {
                        handleSpecialRows();
                    }
                });

            });

        })();
    </script>
</body>
</html>
2

Firstly, welcome to the forums.

While we are primarily here to help people with their Free Code Camp progress, we are open to people on other paths, too. Some of what you are asking is pretty trivial in the Free Code Camp context, so you might find that if you’re not getting the instruction and material you need in your current studies, the FCC curriculum will really help you get started. At a modest guess I’d say investing a 4-5 hours working through the curriculum here will really pay off. You can find the curriculum at https://www.freecodecamp.org/learn.

With your current questions, we don’t have enough context to know what you already know or don’t know, so it is impossible to guide you without just telling you the answer (which we won’t do).

It is pretty typical on here for people to share a codepen / repl.it / jsfiddle example of what they have tried so that anyone helping has more of an idea of what help is actually helpful.

Please provide some example of what you’ve tried and I’m sure you’ll get more help.

Happy coding :slight_smile:

3

I provided the same code.

Upon clicking the 2nd column header click. The rows with data-sort=‘01-Jan-3000’ should not come to the top of the table. Because data-sort=“01-jan-3000” means there is no date from the backend. When there is no date, the particular rows should not be included in the sorting and empty dates or with data-sort=“01-Jan-3000” should not come to the top of the table.

Upon the 2nd column header click, I tried to remove the rows with data-sort=“01-Jan-3000” and when tried to add or append to the table bottom is not work.

4

Pasting the instructions you are trying to follow doesn’t really help us understand how you are stuck and what you’re thinking

5

This is code snippet in jsFiddle

6

Ok, can you try explaining how you are stuck?

7

Upon clicking the 2nd column header click. The rows with data-sort=‘01-Jan-3000’ should not come to the top of the table. Because data-sort=“01-jan-3000” means there is no date from the backend. When there is no date, the particular rows should not be included in the sorting and empty dates or with data-sort=“01-Jan-3000” should not come to the top of the table.

Upon the 2nd column header click, I tried to remove the rows with data-sort=“01-Jan-3000” and when tried to add or append to the table bottom is not work.

9

Just copy posting the instructions doesn’t really help me understand how you personally are stuck though

10

In this, if you use sorting either asc / desc functionality on the Date on Set column, the empty date with attribute data-sort=“01-Jan-3000”, should not come on the top.