JQuery Sorting by Multiple Factors
Hi I spent 2 hours browsing SO to find the answer, but can't seem to find it, they are all sorting by 1 factor only here, which is what I am trying to do:
Handling sorting of the div list by two parameters:
Parameter 1, sortId; Each result div # inside div # result-container has a data attribute called sortId that ranges from 0 to 2 (0, 1, 2). Also inside this div there is a p with the class name totalPrice.
Parameter 2, orderBy: ASC / DESC.
Buttons I have three buttons that need to sort these divs using the sortId attribute so that:
Button 1 sorts by sortId 0 Button 2 sorts by sortId 1 Button 3 sorts by sortId 2
It then also has to sort the p.totalPrice ASC and then repeat the DESC sort, but preserving the sortId order.
I can sort it 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 to do it using sortId either.
UPDATE:
I created a JSFiddle: https://jsfiddle.net/ngepj78s/
Mostly I only use sorting and most likely less clunky code.
source to share
I have updated the jsfiddle and it should work as intended.
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 notes, I used 2 variables declared outside of your functions to store the necessary information about the output state. The sorting depends on these variables, and they change in the click event.
Also, I generalized your function call. It's not necessary to change the sort settings, but it allows your code to work with more divs.
Thanks, 2mnyzs
source to share