jQuery Sorting on Multiple factors

Question

Hi i have spent 2 hours looking through SO to find an answer but can't seem to find one, they all sort by 1 factor only here's what i'm trying to do:

Handle sorting of a list of div's by two parameters:

Parameter 1, sortId; Each div#result inside div#results-container has a data attribute called sortId this ranges from 0 to 2 (0, 1, 2). Also inside this div there is a p with class name totalPrice.

Parameter 2, orderBy: ASC / DESC.

Buttons: I have three buttons that should sort these divs by the sortId attribute so:

Button 1 sorts by sortId 0 Button 2 sorts by sortId 1 Button 3 sorts by sortId 2

Then it should also sort the p.totalPrice ASC then if pushed again sort by DESC but still keeping the order of sortId.

I can get it to sort by Price:

value1 = $(a).find('p.totalPrice').text();
value2 = $(b).find('p.totalPrice').text();

value1 = Number(value1.replace(/[^0-9\.]+/g,""));
value2 = Number(value2.replace(/[^0-9\.]+/g,""));

result = (value1 < value2 ? -1 : (value1 > value2 ? +1 : 0));

I just can't figure out how so do it by the sortId also.

UPDATE:

I have created a JSFiddle: https://jsfiddle.net/ngepj78s/

I'm mostly there just the sorting and most probably less clunky code.

filter out arrays for each sortID and then run your totalPrice sort on those separately, if I'm understanding your question right; should do what you want. It would help if you made a JSFiddle so we can know exactly what you mean — bruchowski
– bruchowski, Commented Jul 12, 2015 at 3:56
@bruchowski - thank you from your comment i have put this together: jsfiddle.net/ngepj78s It works without the ASC / DESC and also might be clunky. — Lee Stevens
– Lee Stevens, Commented Jul 12, 2015 at 5:07

Austin Schmidt · Accepted Answer · 2015-07-13 16:15:13Z

I've updated your jsfiddle and it should work as intended now.

HTML:

<button class="btn btn-rounded active sort" type="submit" data-sort-id="0">0</button>
<button class="btn btn-rounded inactive sort" type="submit" data-sort-id="1">1</button>
<button class="btn btn-rounded inactive sort" type="submit" data-sort-id="2">2</button>
<div id="results-container">
    <div id="result" data-sort-id="0">
        (id=0)
        <p class="totalPrice">$110.00</p>
    </div>
    <div id="result" data-sort-id="1">
        (id=1)
        <p class="totalPrice">$70.00</p>
    </div>
    <div id="result" data-sort-id="1">
        (id=1)
        <p class="totalPrice">$90.00</p>
    </div>
    <div id="result" data-sort-id="0">
        (id=0)
        <p class="totalPrice">$100.00</p>
    </div>
    <div id="result" data-sort-id="2">
        (id=2)
        <p class="totalPrice">$160.00</p>
    </div>
</div>

JS:

var asc = true;
var currId = 0;
$("button.btn.btn-rounded").on('click', function ()
    {
        $("button.btn.btn-rounded").removeClass("active").addClass("inactive");
        $(this).removeClass("inactive").addClass('active');

        var sortId = $(this).data('sort-id');
        //Needed for sorting preferences
        asc = (currId != sortId ? true : !asc);
        currId = sortId;

        //Generalized function call
        var params = Array();
        params.push(sortId);
        $('.sort').each(function(){
            if(sortId != $(this).data('sort-id')) params.push($(this).data('sort-id'));
        });
        leeSort(params);
    });

    function leeSort(sortIds)
    {
        var array = Array();

        // Get Items by Sort Order
        for (var x = 0; x < sortIds.length; x++)
        {
            var sortId = sortIds[x];
            array[sortId] = $('div#results-container div#result[data-sort-id="' + sortId + '"]').get();
        }

        //console.log(array);

        $('div#results-container').html('');

        for (x = 0; x < sortIds.length; x++)
        {
            var sortId = sortIds[x];
            var sortArray = array[sortId].sort(function(a, b) {
                var oA = $(a).find("p.totalPrice").html().trim().replace(/[^0-9\.]+/g,"");
                var oB = $(b).find("p.totalPrice").html().trim().replace(/[^0-9\.]+/g,"");
                if(asc){
                    return oA - oB;
                }else{
                    return oB - oA;
                }
            });

            for (var i = 0; i < sortArray.length; i++)
            {
                $('div#results-container').append($(sortArray[i]));
            }
        }
    }

A few things to note, I used 2 variables declared outside your functions to store necessary information about the state of output. The sorting is dependant on these variables and they are modified in the click event.

Also, I generalized your function call. This isn't necessary for changing your sorting preferences but it allows your code to work with more divs.

Thanks, 2mnyzs

Collectives™ on Stack Overflow

jQuery Sorting on Multiple factors

UPDATE:

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

UPDATE:

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related