Table sorting doesn't work with IsotopeJs

Question

I am trying to sort my table with IsotopeJs but it isn't working. I followed what has been given in the Isotope documentation but my table doesn't react. Although the documentation used ul li , I changed it to a table layout. Besides that, I used a drop-down instead of buttons to sort the table. If selected an option from the drop-down list, the table should sort the data of countries and servers in descending order, that is from high to low, and prices in ascending order. It would be greatly appreciated if someone could check my code and see if I'm doing anything wrong.

Here's the Codepen link: https://codepen.io/zakero/pen/mddagyo Here's the code:

HTML

<h1>Table</h1>

Sort By:
<select id="sorts">
  <option data-sort-value="countries">Most Countries</option>
  <option data-sort-value="servers">Most Servers</option>
  <option data-sort-value="price">Price</option>
</select>


<table class="table-like" class="tablesorter">
    <thead>
        <tr>
            <th>Options</th>
            <th>Countries</th>
            <th>Servers</th>
            <th>Monthly</th>
        </tr>
  </thead>
  <tbody>
        <tr>
            <td>Option 1</td>
            <td class="countries">10</td>
            <td class="servers">3000+</td>
            <td class="price">$10.95</td>
        </tr>
        <tr>
            <td>Option 2</td>
            <td class="countries">56</td>
            <td class="servers">3563</td>
            <td class="price">$8.99</td>
        </tr>
        <tr>
            <td>Option 3</td>
            <td class="countries">34</td>
            <td class="servers">500+</td>
            <td class="price">$6.95</td>
        </tr>
        <tr>
            <td>Option 4</td>
            <td class="countries">23</td>
            <td class="servers">200+</td>
            <td class="price">$14.99</td>
        </tr>
        <tr>
      <td>Option 5</td>
            <td class="countries">86</td>
            <td class="servers">38</td>
            <td class="price">$5.99</td>
        </tr>
        <tr>
            <td>Option 6</td>
            <td class="countries">33</td>
            <td class="servers">50</td>
            <td class="price">$12.99</td>
        </tr>
    </thead>
</table>

CSS

table{
    width: 100%;
    margin: 0 0 0 0;
}

table td{
    border: 1px solid #000;
    font-size: 13px;
}

table tr{
    text-align: center;
}

Javascript

// external js: isotope.pkgd.js

// init Isotope
var $table = $('.table-like').isotope({
  layoutMode: 'vertical',
  getSortData: {
    countries: '.countries parseInt',
    servers: '.servers parseInt',    
    price: '.price parseInt',
    }
  }
});

$('#sorts').select(function() {
  var sortValue = $(this).attr('data-sort-value');
  $table.isotope({ sortBy: sortValue });
});

Answer 1

There are a couple of problem, the first one is that you have an extra closing bracket for the object that you pass to .isotope and second, you're using a .select(..) event listener on a <select> element, this event listener is triggered when that text of an input is selected not when the value of a <select> object is changed. There are a couple of other problems like invalid HTML and using isotope directly on a table and using parseInt for value that cannot be parsed to integer. Here is a working version of your snippet:

 var $table = $('.table-like').isotope({ layoutMode: 'vertical', itemSelector: 'tr', getSortData: { countries: '.countries parseInt', servers: '.servers parseInt', price: function(row) { return parseFloat($(row).find('.price').text().replace("$", "")) }, } }); $('#sorts').change(function() { var sortValue = $(this).find("option:selected").attr('data-sort-value'); $table.isotope({ sortBy: sortValue }); });

 table { width: 100%; margin: 0 0 0 0; } table td { border: 1px solid #000; font-size: 13px; } table tr { text-align: center; } table body { position: static; } td, th { width: 100px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script> <h1>Table</h1> Sort By: <select id="sorts"> <option data-sort-value="countries">Most Countries</option> <option data-sort-value="servers">Most Servers</option> <option data-sort-value="price">Price</option> </select> <table class="table-like" class="tablesorter"> <thead> <tr> <th>Options</th> <th>Countries</th> <th>Servers</th> <th>Monthly</th> </tr> </thead> <tbody> <tr> <td>Option 1</td> <td class="countries">10</td> <td class="servers">3000+</td> <td class="price">$10.95</td> </tr> <tr> <td>Option 2</td> <td class="countries">56</td> <td class="servers">3563</td> <td class="price">$8.99</td> </tr> <tr> <td>Option 3</td> <td class="countries">34</td> <td class="servers">500+</td> <td class="price">$6.95</td> </tr> <tr> <td>Option 4</td> <td class="countries">23</td> <td class="servers">200+</td> <td class="price">$14.99</td> </tr> <tr> <td>Option 5</td> <td class="countries">86</td> <td class="servers">38</td> <td class="price">$5.99</td> </tr> <tr> <td>Option 6</td> <td class="countries">33</td> <td class="servers">50</td> <td class="price">$12.99</td> </tr> </tbody> </table>