Sort HTML table by Javascript

Question

I have the following HTML table which I wanted to be sorted by data-sku=""

( function() {
        $("table tbody tr").sort(sort_table).appendTo('table tbody');
            function sort_table(a, b) {
            return ($(b).data('sku')) < ($(a).data('sku')) ? 1 : -1;
        }
} )();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="abp-product-42" data-id="42" data-sku="A-04-0002"><td>A-04-0002</tr>
<tr class="abp-product-21" data-id="21" data-sku="A-04-0011"><td>A-04-0011</td></tr>
<tr class="abp-product-391" data-id="391" data-sku="A-02-0008"><td>A-02-0008</td></tr>
<tr class="abp-product-393" data-id="393" data-sku="A-02-0007"><td>A-02-0007</td></tr>
<tr class="abp-product-40" data-id="40" data-sku="A-04-0010"><td>A-03-0010</td></tr>
<tr class="abp-product-390" data-id="390" data-sku="A-03-0003"><td>A-04-0003</td></tr>
</tbody>
</table>

But somehow it doesn't work - what I'm doing wrong or what I'm missing?

Without jquery, I would access tbody children, copy that to an array, .sort((a, b) => a.localeCompare(b)), remove the original children and insert the children from the array — undefined
– undefined, Commented Nov 9, 2021 at 9:23
The data-sku attribute for the last 2 rows are not match with it's cell content. — The KNVB
– The KNVB, Commented Nov 9, 2021 at 9:26
@TBA thanks guys! I was thinking im insane. Last but not least, how can I extend the function so it refreshes the function like every 5 seconds to check if the table has changed (product got removed or added) do I do this with an interval? — John Smith
– John Smith, Commented Nov 9, 2021 at 9:33

TBA · Accepted Answer · 2021-11-09 09:43:16Z

2

This will call your function in every 5 seconds like I mentioned in the comment.

window.setInterval(function(){
 sortData();
}, 5000);

function sortData(){
 $("table tbody tr").sort(sort_table).appendTo('table tbody');
            function sort_table(a, b) {
            return ($(b).data('sku')) < ($(a).data('sku')) ? 1 : -1;
        }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr class="abp-product-42" data-id="42" data-sku="A-04-0002"><td>A-04-0002</tr>
<tr class="abp-product-21" data-id="21" data-sku="A-04-0011"><td>A-04-0011</td></tr>
<tr class="abp-product-391" data-id="391" data-sku="A-02-0008"><td>A-02-0008</td></tr>
<tr class="abp-product-393" data-id="393" data-sku="A-02-0007"><td>A-02-0007</td></tr>
<tr class="abp-product-40" data-id="40" data-sku="A-04-0010"><td>A-04-0010</td></tr>
<tr class="abp-product-390" data-id="390" data-sku="A-03-0003"><td>A-03-0003</td></tr>
<tr class="abp-product-390" data-id="390" data-sku="A-05-0003"><td>A-05-0003</td></tr>
</tbody>
</table>

answered Nov 9, 2021 at 9:43

TBA

2,0254 gold badges17 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TBA Over a year ago

@JohnSmith no problem, Happy to help you ^_^

Raeesh Alam · Accepted Answer · 2021-11-09 09:40:22Z

Your code is working fine.
Just, The last 2 rows attribute data-sku are not match with it's cell content.

<tr class="abp-product-40" data-id="40" data-sku="A-04-0010">
    <td>A-03-0010</td>
</tr>
<tr class="abp-product-390" data-id="390" data-sku="A-03-0003">
    <td>A-04-0003</td>
</tr>

(function () {
    function sort_table(a, b) {
        return ($(b).attr('data-sku')) < ($(a).attr('data-sku')) ? 1 : -1;
    }
    $("table tbody tr").sort(sort_table).appendTo('table tbody');
})();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tbody>
        <tr class="abp-product-42" data-id="42" data-sku="A-04-0002">
            <td>A-04-0002
        </tr>
        <tr class="abp-product-21" data-id="21" data-sku="A-04-0011">
            <td>A-04-0011</td>
        </tr>
        <tr class="abp-product-391" data-id="391" data-sku="A-02-0008">
            <td>A-02-0008</td>
        </tr>
        <tr class="abp-product-393" data-id="393" data-sku="A-02-0007">
            <td>A-02-0007</td>
        </tr>
        <tr class="abp-product-40" data-id="40" data-sku="A-03-0010">
            <td>A-03-0010</td>
        </tr>
        <tr class="abp-product-390" data-id="390" data-sku="A-04-0003">
            <td>A-04-0003</td>
        </tr>
    </tbody>
</table>

Collectives™ on Stack Overflow

Sort HTML table by Javascript

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related