Table 排序不适用于 IsotopeJs
Table sorting doesn't work with IsotopeJs
我正在尝试使用 IsotopeJs 对我的 table 进行排序,但它不起作用。我遵循了 Isotope 文档中给出的内容,但我的 table 没有反应。虽然文档使用 ul li
,但我将其更改为 table 布局。除此之外,我使用下拉菜单而不是按钮来对 table 进行排序。如果从下拉列表中选择一个选项,table 将国家和服务器的数据按降序排列,即从高到低,价格按升序排列。如果有人可以检查我的代码并查看我是否做错了什么,将不胜感激。
这是 Codepen link: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">.95</td>
</tr>
<tr>
<td>Option 2</td>
<td class="countries">56</td>
<td class="servers">3563</td>
<td class="price">.99</td>
</tr>
<tr>
<td>Option 3</td>
<td class="countries">34</td>
<td class="servers">500+</td>
<td class="price">.95</td>
</tr>
<tr>
<td>Option 4</td>
<td class="countries">23</td>
<td class="servers">200+</td>
<td class="price">.99</td>
</tr>
<tr>
<td>Option 5</td>
<td class="countries">86</td>
<td class="servers">38</td>
<td class="price">.99</td>
</tr>
<tr>
<td>Option 6</td>
<td class="countries">33</td>
<td class="servers">50</td>
<td class="price">.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 });
});
有几个问题,第一个是您传递给 .isotope
的对象有一个额外的右括号,其次,您使用的是 .select(..)
event 侦听器<select>
元素,当输入的文本被选中时触发此事件侦听器,而不是当 <select>
对象的值更改时触发。还有一些其他问题,例如无效 HTML 和直接在 table 上使用 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;
}
<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">.95</td>
</tr>
<tr>
<td>Option 2</td>
<td class="countries">56</td>
<td class="servers">3563</td>
<td class="price">.99</td>
</tr>
<tr>
<td>Option 3</td>
<td class="countries">34</td>
<td class="servers">500+</td>
<td class="price">.95</td>
</tr>
<tr>
<td>Option 4</td>
<td class="countries">23</td>
<td class="servers">200+</td>
<td class="price">.99</td>
</tr>
<tr>
<td>Option 5</td>
<td class="countries">86</td>
<td class="servers">38</td>
<td class="price">.99</td>
</tr>
<tr>
<td>Option 6</td>
<td class="countries">33</td>
<td class="servers">50</td>
<td class="price">.99</td>
</tr>
</tbody>
</table>
我正在尝试使用 IsotopeJs 对我的 table 进行排序,但它不起作用。我遵循了 Isotope 文档中给出的内容,但我的 table 没有反应。虽然文档使用 ul li
,但我将其更改为 table 布局。除此之外,我使用下拉菜单而不是按钮来对 table 进行排序。如果从下拉列表中选择一个选项,table 将国家和服务器的数据按降序排列,即从高到低,价格按升序排列。如果有人可以检查我的代码并查看我是否做错了什么,将不胜感激。
这是 Codepen link: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">.95</td>
</tr>
<tr>
<td>Option 2</td>
<td class="countries">56</td>
<td class="servers">3563</td>
<td class="price">.99</td>
</tr>
<tr>
<td>Option 3</td>
<td class="countries">34</td>
<td class="servers">500+</td>
<td class="price">.95</td>
</tr>
<tr>
<td>Option 4</td>
<td class="countries">23</td>
<td class="servers">200+</td>
<td class="price">.99</td>
</tr>
<tr>
<td>Option 5</td>
<td class="countries">86</td>
<td class="servers">38</td>
<td class="price">.99</td>
</tr>
<tr>
<td>Option 6</td>
<td class="countries">33</td>
<td class="servers">50</td>
<td class="price">.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 });
});
有几个问题,第一个是您传递给 .isotope
的对象有一个额外的右括号,其次,您使用的是 .select(..)
event 侦听器<select>
元素,当输入的文本被选中时触发此事件侦听器,而不是当 <select>
对象的值更改时触发。还有一些其他问题,例如无效 HTML 和直接在 table 上使用 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;
}
<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">.95</td>
</tr>
<tr>
<td>Option 2</td>
<td class="countries">56</td>
<td class="servers">3563</td>
<td class="price">.99</td>
</tr>
<tr>
<td>Option 3</td>
<td class="countries">34</td>
<td class="servers">500+</td>
<td class="price">.95</td>
</tr>
<tr>
<td>Option 4</td>
<td class="countries">23</td>
<td class="servers">200+</td>
<td class="price">.99</td>
</tr>
<tr>
<td>Option 5</td>
<td class="countries">86</td>
<td class="servers">38</td>
<td class="price">.99</td>
</tr>
<tr>
<td>Option 6</td>
<td class="countries">33</td>
<td class="servers">50</td>
<td class="price">.99</td>
</tr>
</tbody>
</table>