Search code examples
sortingjquery-mobilejquery-mobile-listview

Sort listview on button click in jQuery Mobile

I'm new to jQuery mobile. I want to be able to sort listview items by pricing (low-high, for example) when a button is clicked. I can't seem to find anything online on how to do it in jQuery mobile. I'm aware there's tiny sort plugin, but I need to write the method myself.

This is a sample of my listview.

<ul data-role="listview" data-filter="true" data-input="#searchpostcode" class="searchable">
            <li class="british fish low-budget"><a href="#">
                <img src="images/fishandchips.png" class="ui-li-thumb">
                <h4>Fish and Chips</h4>
                <p>British cuisine, contains fish</p>
                <p class="ui-li-aside">£6.00</p>
                </a>
            </li>
            <li class="spanish high-budget"><a href="#">
                <img src="images/paella.png" class="ui-li-thumb">
                <h4>Seafood Paella</h4>
                <p>Spanish cuisine, contains seafood</p>
                <p class="ui-li-aside">£8.00</p>
                </a>
            </li>
            <li class="american medium-budget"><a href="#">
                <img src="images/burger.png" class="ui-li-thumb">
                <h4>Beef Burger</h4>
                <p>American burger</p>
                <p class="ui-li-aside">£7.00</p>
                </a>
            </li>
</ul>

Is there an easy way to do it? Any guidance will be appreciated, thanks.

Solution

  • Sorting the incoming data is the fastest option, there will be anyway a DOM manipulation. So, sort the data and then invoke listview("refresh").

    DEMO:

    var data = [
  {category: "british fish low-budget", picture: "fishandchips", name: "Fish and Chips", description: "British cuisine, contains fish", price: "6.00"},
  {category: "spanish high-budget", picture: "paella", name: "Seafood Paella", description: "Spanish cuisine, contains seafood", price: "8.00"},
  {category: "american medium-budget", picture: "burger", name: "Beef Burger", description: "American burger", price: "7.00"}
];

function updateListview(sorting){
  var direction = ~sorting.indexOf("-asc") ? 1 : -1;
  data.sort(function(a, b) {
    return direction *(Number(a.price) - Number(b.price));
  });
  var html = "";
  $.each(data, function(index, item) {
    html += '<li class="' + item.category + '"><a href="#">';
    html += '<img src="images/' + item.picture + '".png" class="ui-li-thumb">';
    html += '<h4>' + item.name + '</h4>';
    html += '<p>' + item.description + '</p>';
    html += '<p class="ui-li-aside">£' + item.price + '</p>';
    html += '</a></li>';
  });
  $("#food").data("sort", sorting).empty().html(html).listview("refresh");
}

$(document).on("listviewcreate", "#food", function(event, ui) {
  $("#price-sort").on("vclick", function(e) {
    var sorting = $("#food").data("sort") == "price-asc" ? "price-desc" : "price-asc";
    updateListview(sorting);
  });
});

$(document).on("pagecreate", "#page-one", function() {
  updateListview("none");
});
    <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.css">
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
</head>
<body>
  <div id="page-one" data-role="page">
    <div role="main" class="ui-content">
      <a id="price-sort" href="#" class="ui-btn ui-corner-all ui-icon-delete ui-btn-icon-left ui-mini">Sort by Price</a>
      <ul data-role="listview" data-sort="none" data-inset="true" data-filter="true" id="food" name="food"></ul>
    </div>
  </div>
</body>
</html>

    Moreover, if You need a more sophisticated sort function, which can sort by more than just one parameter, take a look here: Sort array of objects by string property value