javascript - 表格排序不适用于 IsotopeJs

Question

我正在尝试使用 IsotopeJs 对我的表格进行排序，但它不起作用。我遵循了同位素文档中给出的内容，但我的 table 没有反应。虽然文档使用了 ul li，但我将其更改为表格布局。除此之外，我使用下拉菜单而不是按钮来对表格进行排序。如果从下拉列表中选择一个选项，该表应按降序排列国家和服务器的数据，即从高到低，价格按升序排列。如果有人可以检查我的代码并查看我是否做错了什么，将不胜感激。

这是 Codepen 链接:https://codepen.io/zakero/pen/mddagyo这是代码:

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

有几个问题，第一个是您传递给 .isotope 的对象有一个额外的右括号。其次，您使用的是 .select(..) event <select> 上的监听器元素，此事件监听器在选择输入的文本时触发，而不是在 <select> 的值时触发。对象被改变。还有一些其他问题，例如无效的 HTML 和使用 isotope直接放在 table 上并使用 parseInt对于无法解析为整数的值。这是您的代码段的工作版本:

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>