Question

我正在尝试使用IsotopeJs对我的表进行排序，但是它不起作用。我遵循了同位素文档中给出的内容，但是我的桌子没有反应。尽管文档使用了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侦听器{1}}元素，当选择输入文本而不是更改<select>对象的值时，将触发此事件侦听器。还有其他一些问题，例如无效的HTML，直接在表上使用<select>以及将isotope用作无法解析为整数的值。这是您的代码段的有效版本：

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;
}

表排序不适用于IsotopeJs

1 个答案: