list.js - Custom sort function on button click without jQuery-CodePudding

List.js without jQuery. It's working as supplied out of the box.

Mission:

When a 'List By Price' button is clicked, sold-out items need to display at the bottom of the sorted list - regardless of ascending or descending.

So I'm developing a custom sort() for when 'List By Price' button is clicked.

Some code for info:

// in html
<button  data-sort="price">Price</button>

<ul id="list">
  <li >
    <img />
    <p >63</p>
  </li>
</ul>

// in js file
list.sort('price', {
   sortFunction: function (a, b) {
     console.log('sorting price');
  }
});

Problem:

The above sort() executes at initialisation (not wanted), and doesn't execute when the price button is clicked (which IS wanted). I get the standard sort instead, so sold items fill the top of the list with ascending results.

Question: How do I get list.js to understand it needs to execute my custom sort() when 'Price' button is clicked?

(I've trailed through the material and examples on the list.js site and searched here to no avail. This must be a basic ask, but I am where I am so, thank you)

CodePudding user response：

This is an example of sorting ul elements with vanilla JS.

let sortAsc = true;

function sort(event) {
   event.preventDefault();

   const list = document.getElementById('list');
   if (!list || list.length === 0) return;
   const items = getArrayOfElements(list.getElementsByClassName('item'));
   if (!items || items.length === 0) return;

   items.sort(function(a, b) {
      const value1 = getValueFromElementWithClass(a, 'price');
      const value2 = getValueFromElementWithClass(b, 'price');
      const sortDir = (sortAsc ? 1 : -1);
      if (value1 < value2) return -1 * sortDir;
      if (value1 > value2) return 1 * sortDir;
      return 0;
   });
   // Removes elements...
   for(let i = 0; i < items.length; i  ) {
      list.removeChild(items[i]);
   }
   // Inserts sorted elements...
   list.append(...items);
   // Sets the sort direction for next call...
   sortAsc = !sortAsc; 
}

function getArrayOfElements(source) {
      if (!source || source.length === 0) return [];
      const items = []; 
      for(let i = 0; i < source.length; i  ) {
         items.push(source[i]);
      }
      return items;
}

function getValueFromElementWithClass(parent, className) {
   if (!parent || !className) return '';
   const children = parent.getElementsByClassName(className);
   return  (children && children.length > 0) ? children[0].innerHTML : '';
}

<!DOCTYPE html>
<html lang="en" charset="utf-8">
<head>
   <title>...</title>
</head>
<body>
<button  onclick="sort(event)">Price</button>

<ul id="list">
   <li >
      <span>Price:</span>
      <span >3</span>
   </li>
   <li >
      <span>Price</span>
      <span >1</span>
   </li>
   <li >
      <span>Price:</span>
      <span >7</span>
   </li>   
   <li >
      <span>Price:</span>
      <span >5</span>
   </li>
</ul>
</body>

</html>

CodePudding user response：

In the HTML, you can assign the button a JavaScript function to perform when it is clicked using

onclick="someFunction()"

You can put the list sort into a function and then make it execute when the button in html is clicked. When you put it into a function, do not call it later in JavaScript, only use the onclick method, which will call it when the button is clicked.