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?
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>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>