Member Avatar for random_1

Hi, i want to sort divs alphabetically both asc and desc. I am using a dropdown list created by using bootstrap:

<div class="btn-group">
    <a href="#" data-target="dropdown-menu" class="btn btn-default btn-block dropdown-toggle" data-toggle="dropdown">
    Sort By
    <span class="caret"></span>
    </a>
    <ul class="dropdown-menu" style="width: 100%;">
       <li><a href="#" class="nameAsc">Name: A to Z</a></li>
       <li><a href="#" class="nameDes">Name: Z to A</a></li>
       <li><a href="#" class="priceAsc">Price: Low to High</a></li>
       <li><a href="#" class="priceDes">Price: High to Low</a></li>
    </ul>
</div>

and my divs i want to sort are populated with data from database:

<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter">
   <a href="products_details.php?pid=<?php echo $row['fld_product_id']; ?>" class="btn btn-warning btn-xs" role="button"><img src="products/<?php echo $row['fld_product_img'] ?>" class="img-responsive"></a>
   <p class="product-name"><?php echo $row['fld_product_name'] ?></p>
   <p class="product-price">RM <?php echo $row['fld_product_price'] ?></p>
</div>

Im kind of confused on how to go about it. because i want to sort the div but it needs to find the product name in <p> which is in the div. how would it find the name so it can sort?

$(".nameAsc").click(function(){
     var $name = $(".product-name");
     var $divToSort = $(".gallery_product");

     var $sort = $divToSort.sort(function(a, b){
            //what goes in here?
     });
});
  • 2 Contributors
  • 1 Reply
  • 5K Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by gentlemedia

Dani AI

Generated

You do not need extra data attributes to sort these; you can read the text inside each card, sort the elements, then re-append them to their container. Use Intl.Collator for correct A-Z comparisons (case-insensitive and locale-aware) and parse numbers from the price text. The key is to convert the jQuery collection to a plain array with .get(), sort it, then append the elements back in order.

$(function () {
  var $container = $(".gallery_product").parent(); // adjust if needed
  var collator = new Intl.Collator(undefined, { sensitivity: "base" });

  function sortAndRender(items) {
    $.each(items, function (_, el) { $container.append(el); });
  }

  function byNameAsc(a, b) {
    var an = $(a).find(".product-name").text().trim();
    var bn = $(b).find(".product-name").text().trim();
    return collator.compare(an, bn);
  }
  function byPriceAsc(a, b) {
    var ap = parseFloat($(a).find(".product-price").text().replace(/[^\d.-]/g, "")) || 0;
    var bp = parseFloat($(b).find(".product-price").text().replace(/[^\d.-]/g, "")) || 0;
    return ap - bp;
  }

  $(".nameAsc").on("click", function (e) { e.preventDefault();
    var items = $container.children(".gallery_product").get().sort(byNameAsc);
    sortAndRender(items);
  });
  $(".nameDes").on("click", function (e) { e.preventDefault();
    var items = $container.children(".gallery_product").get().sort(byNameAsc).reverse();
    sortAndRender(items);
  });
  $(".priceAsc").on("click", function (e) { e.preventDefault();
    var items = $container.children(".gallery_product").get().sort(byPriceAsc);
    sortAndRender(items);
  });
  $(".priceDes").on("click", function (e) { e.preventDefault();
    var items = $container.children(".gallery_product").get().sort(byPriceAsc).reverse();
    sortAndRender(items);
  });
});

Notes:

  • If you filter items, sort only visible ones with .children('.gallery_product:visible').
  • For large datasets or pagination, do the sort in SQL (ORDER BY) and re-render instead.

References: Array.prototype.sort on MDN, Intl.Collator on MDN, jQuery .get().

Member Avatar for gentlemedia

Also insert the name and the price from your database in data attributes. Something like this:

<p class="product-name" data-name="<?php echo $row['fld_product_name'] ?>"><?php echo $row['fld_product_name'] ?></p>
<p class="product-price" data-price="<?php echo $row['fld_product_price'] ?>">RM <?php echo $row['fld_product_price'] ?></p>

BUT... you will need to replace the white spaces with dashes and convert to lowercase, before you insert them into your data attributes.
https://stackoverflow.com/questions/11330480/strip-php-variable-replace-white-spaces-with-dashes.

Or you could do this is also within your jquery function.
https://stackoverflow.com/questions/1983648/replace-space-with-dash-and-make-all-letters-lower-case-using-javascript

Now you can sort based on the values of the data attributes.

Here's an example for price:
https://codepen.io/glensargent/pen/zqwbqZ

For alphabetical sorting there are probably also examples to find.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.