Javascript sort method does not sort after initial run

Question

I'm trying to sort table rows by a data-attribute. This attribute is an integer. I have a custom sort order that these integers need to be sorted by. The following code snippet works completely as intended....but only one time. If I try to run it again after changing the data-attribute of a random item, it does not run again. Moreover, when I first run it, I'm console logging "sorting" on each run. I have 16 initial rows, and it's outputting 46 logs on first run. Every run after that, it's only outputting 15 logs so I'm thinking that is why it's not properly sorting but I don't know how to fix it. I'm not deleting any rows or changing anything other than the html in the inspector to modify the data-attribute where it's pulling the sort order integer from.

    function sortItems() {
        //my custom order of how to sort the rows
        sortList = [3, 4, 5, 6, 7, 8, 1, 2, 17, 9, 16, 10, 18, 11, 19, 13, 12, 14, 15]
        $tbody = $('#queueTable tbody');
        $tbody.find('tr').sort(function(a, b) {
            console.log('sorting')
            tda = sortList.indexOf($(a).data('status'));
            tdb = sortList.indexOf($(b).data('status'));
            return tda > tdb ? 1
                :
                tda < tdb ? -1
                :
                0;
        }).appendTo($tbody);
    }

[![enter image description here][1]][1]

<table class="table table-striped table-sm" id="queueTable">
    <thead>
        <tr>
            <th scope="col">Encounter #</th>
            <th scope="col">Location</th>
            <th scope="col">Doctor</th>
            <th scope="col">Current Tech</th>
            <th scope="col">Status</th>
            <th scope="col">Current Status / Total Time</th>
            <th scope="col">Status Notes</th>
        </tr>
    </thead>
    <tbody>
        <tr wire:id="aTiQ4U0TDx21BYTuLrTg" data-status="3" data-selectable="itemRow" wire:ignore="" id="row60833" style="background-image: linear-gradient(to right, #ffed4a , #ffed4a)" class="should-alert">
            <td scope="row"><a href="#" target="_blank">301581 </a></td>
            <td> <span wire:click="setCurrentLocation(374)" style="cursor: pointer" title="548">
                DS00118/MN
            </span>
                <br> </td>
            <td wire:click="buildDocReassignModal" style="cursor: pointer; "> Dr. White </td>
            <td id="usercell60833" class="userCell" data-id="">
                <div style="font-size: 24pt;" role="button" wire:click="resolveIssue(true)">
                    <svg class="svg-inline--fa fa-robot fa-w-20" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="robot" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" data-fa-i2svg="">
                        <path fill="currentColor" d="M32,224H64V416H32A31.96166,31.96166,0,0,1,0,384V256A31.96166,31.96166,0,0,1,32,224Zm512-48V448a64.06328,64.06328,0,0,1-64,64H160a64.06328,64.06328,0,0,1-64-64V176a79.974,79.974,0,0,1,80-80H288V32a32,32,0,0,1,64,0V96H464A79.974,79.974,0,0,1,544,176ZM264,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,264,256Zm-8,128H192v32h64Zm96,0H288v32h64ZM456,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,456,256Zm-8,128H384v32h64ZM640,256V384a31.96166,31.96166,0,0,1-32,32H576V224h32A31.96166,31.96166,0,0,1,640,256Z"></path>
                    </svg>
                </div>
            </td>
            <td>
                <select wire:model="status" class="block-refresh">
                    <option>Ready for Refraction</option>
                    <option value="1">Testing</option>
                    <option value="4">Ready for Ref (spanish)</option>
                    <option value="5">Ready for OR</option>
                    <option value="6">Ready for OR (Spanish)</option>
                    <option value="7">Ready for Ref (no doc vid)</option>
                    <option value="8">Ready for Ref Rev</option>
                    <option value="9">In Refraction</option>
                    <option value="10">Ready for Doc</option>
                    <option value="11">In Exam</option>
                    <option value="13">Retest Needed</option>
                    <option value="12">Ready for Signoff</option>
                    <option value="14">Complete</option>
                    <option value="15">Review Later</option>
                </select>
                <br>
                <div class="d-flex justify-content-start">
                    <label class="mt-1">
                        <input type="checkbox" wire:model="is_contacts"> Is Contacts? </label>
                </div>
            </td>
            <td>
                <div id="statusTimer60833" class="flaggedRow">
                    <div id="timer60833" style="display: inline-block" class="statusTimer"> <span data-minutes="" class="statusMinutes" data-row-id="60833">07</span>:<span data-seconds="">29</span> </div>
                    <br>
                    <div id="examTimer60833" style="display: inline-block"> <span data-hours="">01</span>:<span data-minutes="">43</span>:<span data-seconds="">06</span> </div>
                </div>
            </td>
            <td>
                <div>
                    <div onclick="focusStatusNotes(60833)" style="background-color: white; border: 1px solid black; width: 183px; min-height: 30px; cursor: pointer; color: black">
                        <br>
                        <p>wants to try different cl</p>
                    </div>
                </div>
            </td>
        </tr>
        <tr wire:id="YujsXyuGRw2YCGBU7fnl" data-status="3" data-selectable="itemRow" wire:ignore="" id="row60839" style="background-image: linear-gradient(to right, #ffed4a , #e60000)" class="should-alert">
            <td scope="row"><a href="#" target="_blank">301591 </a></td>
            <td> <span wire:click="setCurrentLocation(337)" style="cursor: pointer" title="499">
                DS00138/CA
            </span>
                <br> </td>
            <td wire:click="buildDocReassignModal" style="cursor: pointer; "> Dr. Chin </td>
            <td id="usercell60839" class="userCell" data-id="">
                <button wire:click="take">Take</button>
            </td>
            <td>
                <select wire:model="status" class="block-refresh">
                    <option>Ready for Refraction</option>
                    <option value="1">Testing</option>
                    <option value="4">Ready for Ref (spanish)</option>
                    <option value="5">Ready for OR</option>
                    <option value="6">Ready for OR (Spanish)</option>
                    <option value="7">Ready for Ref (no doc vid)</option>
                    <option value="8">Ready for Ref Rev</option>
                    <option value="9">In Refraction</option>
                    <option value="10">Ready for Doc</option>
                    <option value="11">In Exam</option>
                    <option value="13">Retest Needed</option>
                    <option value="12">Ready for Signoff</option>
                    <option value="14">Complete</option>
                    <option value="15">Review Later</option>
                </select>
                <br>
                <div class="d-flex justify-content-start">
                    <div style="font-size: 16pt; color: rgb(155, 155, 155)" role="button" class="mr-3">
                        <svg class="svg-inline--fa fa-robot fa-w-20" onclick="flagIt(60839)" aria-hidden="true" focusable="false" data-prefix="fas" data-icon="robot" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" data-fa-i2svg="">
                            <path fill="currentColor" d="M32,224H64V416H32A31.96166,31.96166,0,0,1,0,384V256A31.96166,31.96166,0,0,1,32,224Zm512-48V448a64.06328,64.06328,0,0,1-64,64H160a64.06328,64.06328,0,0,1-64-64V176a79.974,79.974,0,0,1,80-80H288V32a32,32,0,0,1,64,0V96H464A79.974,79.974,0,0,1,544,176ZM264,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,264,256Zm-8,128H192v32h64Zm96,0H288v32h64ZM456,256a40,40,0,1,0-40,40A39.997,39.997,0,0,0,456,256Zm-8,128H384v32h64ZM640,256V384a31.96166,31.96166,0,0,1-32,32H576V224h32A31.96166,31.96166,0,0,1,640,256Z"></path>
                        </svg>
                    </div>
                    <label class="mt-1">
                        <input type="checkbox" wire:model="is_contacts"> Is Contacts? </label>
                </div>
            </td>
            <td>
                <div id="statusTimer60839" class="flaggedRow">
                    <div id="timer60839" style="display: inline-block" class="statusTimer"> <span data-minutes="" class="statusMinutes" data-row-id="60839">28</span>:<span data-seconds="">45</span> </div>
                    <br>
                    <div id="examTimer60839" style="display: inline-block"> <span data-hours="">01</span>:<span data-minutes="">25</span>:<span data-seconds="">25</span> </div>
                </div>
            </td>
            <td>
                <div>
                    <div onclick="focusStatusNotes(60839)" style="background-color: white; border: 1px solid black; width: 183px; min-height: 30px; cursor: pointer; color: black">
                        <br> </div>
                </div>
            </td>
        </tr>

    </tbody>
</table>

I copied it from this answer: stackoverflow.com/a/28190005/7315363 — maximus1127
– maximus1127, Commented May 7, 2022 at 20:33
I've added a screenshot containing the data-status attribute — maximus1127
– maximus1127, Commented May 7, 2022 at 20:36

maximus1127 · Accepted Answer · 2022-05-08 01:09:21Z

For anyone who comes here in the future, here's how I eventually solved it. I referenced this answer and it kind of got me on the right track. Now, instead of appending to the table, I'm rebuilding the entire html of the table at the end of the function which is allowing the sort function to operate twice in a row without a page refresh.

const sortList = [3, 4, 5, 6, 7, 8, 1, 2, 17, 9, 16, 10, 18, 11, 19, 13, 12, 14, 15]
function sortItems() {
    initRows = $('[data-selectable="itemRow"]')
    newRows = initRows.sort(function(a, b) {
        console.log('sorting')
        return sortList.indexOf($(a).data('status')) > sortList.indexOf($(b).data('status')) ? 1
                    :
                    sortList.indexOf($(a).data('status')) < sortList.indexOf($(b).data('status')) ? -1
                    :
                    0;
            });
            $("#queueTable tbody").html(newRows)
        }

Collectives™ on Stack Overflow

Javascript sort method does not sort after initial run

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related