HTML table rows custom sort using jQuery

Question

I am sorting my table rows on a Code/SKU column. Code/SKU column may or may not contain the - (dash) which is my delimiter. The 3 digit code after - is my product rack number with a prefix between A-Z. I am trying to sort the products in an ascending order based on the rack number irrespective of the prefix. In case if the rack number is missing those products should be listed on the top.

For example, if the input Code/SKU column contains:

RIN65631-A24
PNT64705
CPC31378-D06

Then the output Code/SKU column should be sorted as:

PNT64705
CPC31378-D06
RIN65631-A24

Here is my JSFiddle

I am getting the desired output as stated above but if you look at my JSFiddle you will see that I am using multiple calls $(this).find() function to retrieve a particular element from the DOM which IMO is not necessary. There may be a better way to avoid the redundant find() calls and achieve the same output. Can someone help me in this regard?

EDIT:

Note: Sorting should be performed on the DOM ready event.

Have you thought about using something like datatables.net to do your sorting? You can also intercept the sorting event on that particular column and do something different. — Moby's Stunt Double
– Moby's Stunt Double, Commented Feb 18, 2014 at 19:54
@Moby'sStuntDouble Thank you for the suggestion but the datatables.net plugin will sort the elements on "Alpha Numeric" value of Code/SKU whereas the requirement is to custom sort on just the numeric part of the rack number in Code/SKU. — HackerKarma
– HackerKarma, Commented Feb 18, 2014 at 20:34

Abdennour TOUMI · Accepted Answer · 2014-02-18 20:51:26Z

1

Use sortContent jquery PLugin :

 $('td.sku').sortContent({asc:true,
                         target:function(e){
                           return $(e).parent();
                         },helper:function(e){
                            var html=$(e).html().split('-'); 
                            if(html.length===2){return html[1]}
                             else {return ''}    
                          }
 });

See Demo

Explanation

target callbak : You sort according td element , However, tr should be sorted . So the target is tr which is the parent of td element.
helper : to identify the content to sort

UPDATE :

to sort just numeric characters, Helper callback should be as following :

var myhelper=function(e){
   var html=$(e).html().split('-'); 
    if(html.length===2){return 'b'+html[1].numeric()}
    else {return 'a'+html[0].numeric()}

};

See Demo v2

edited Feb 18, 2014 at 20:51

answered Feb 18, 2014 at 19:59

Abdennour TOUMI

94.6k42 gold badges271 silver badges274 bronze badges

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

3 Comments

HackerKarma Over a year ago

First of all I do not want any "Sort IT" button on my page to trigger the sorting. The data is already loaded in the DOM and that's the one I want to sort using jQuery.

HackerKarma Over a year ago

Secondly, your sort function does not yield the desired output. It's sorting the elements on "Alpha Numeric" value of my rack number whereas the requirement is to sort on just the numeric part of that rack number. Please check my input and output in the question.

HackerKarma Over a year ago

Thta's exactly I wanted. Appreciated!!

user4545152 · Accepted Answer · 2015-02-09 06:44:44Z

$(document).ready(function(){
var th = jQuery('.shortid'),
    inverse = false;

th.click(function(){

    var header = $(this),
        index = header.index();

    header
        .closest('.right-contacts-details')
        .find('.shorting')
        .filter(function(){
            return $(this).index() === index;
        })
        .sort(function(a, b){

            a = $(a).text();
            b = $(b).text();

            return (
                isNaN(a) || isNaN(b) ?
                    a > b : +a > +b
                ) ?
                    inverse ? -1 : 1 :
                    inverse ? 1 : -1;

        }, function(){
            return this.parentNode;
        });

    inverse = !inverse;

});

});

Ananthan Unni · Accepted Answer · 2014-02-18 20:19:07Z

0

Use KnockoutJS. You get the feature out of the box.

answered Feb 18, 2014 at 20:19

Ananthan Unni

1,30410 silver badges24 bronze badges

Collectives™ on Stack Overflow

HTML table rows custom sort using jQuery

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related