我最近遇到一个问题。我打算将这种类型的tablesorter与滑块过滤器一起使用并尝试对其进行修改,但它没有用。我需要能够处理表格列中的数字范围(即不仅仅是像 51 这样的单个数字,而是 3-8)。因此,当我在滑块过滤器上选择值 5 时,我需要它显示列值为 3-8 的行,而不是值为 51 的列。
请问,您对如何修改它以使用表格中的数字范围有任何想法吗?
我最近遇到一个问题。我打算将这种类型的tablesorter与滑块过滤器一起使用并尝试对其进行修改,但它没有用。我需要能够处理表格列中的数字范围(即不仅仅是像 51 这样的单个数字,而是 3-8)。因此,当我在滑块过滤器上选择值 5 时,我需要它显示列值为 3-8 的行,而不是值为 51 的列。
请问,您对如何修改它以使用表格中的数字范围有任何想法吗?
您需要使用 和 的组合filter_formatter
,filter_functions
如下所示(演示):
HTML
<table class="tablesorter">
<thead>
<tr>
<th>AlphaNumeric</th>
<th>Range</th>
<th>Animals</th>
<th>Sites</th>
</tr>
</thead>
<tbody>
<tr><td>abc 123</td><td>1-10</td><td>Koala</td><td>http://www.google.com</td></tr>
<tr><td>abc 1</td><td>38-55</td><td>Ox</td><td>http://www.yahoo.com</td></tr>
<tr><td>abc 9</td><td>4-10</td><td>Girafee</td><td>http://www.facebook.com</td></tr>
<tr><td>zyx 24</td><td>11-22</td><td>Bison</td><td>http://www.whitehouse.gov/</td></tr>
<tr><td>abc 11</td><td>13-43</td><td>Chimp</td><td>http://www.ucla.edu/</td></tr>
<tr><td>abc 2</td><td>28-60</td><td>Elephant</td><td>http://www.wikipedia.org/</td></tr>
<tr><td>abc 9</td><td>9-25</td><td>Lion</td><td>http://www.nytimes.com/</td></tr>
<tr><td>ABC 10</td><td>9-23</td><td>Zebra</td><td>http://www.google.com</td></tr>
<tr><td>zyx 1</td><td>19-29</td><td>Koala</td><td>http://www.mit.edu/</td></tr>
<tr><td>zyx 12</td><td>0-6</td><td>Llama</td><td>http://www.nasa.gov/</td></tr>
</tbody>
</table>
脚本
$(function () {
$('table').tablesorter({
theme: 'blue',
widgets: ['zebra', 'filter'],
widgetOptions: {
filter_functions: {
1: function (e, n, f, i) {
var parts = e.split('-'),
val = parseFloat(f),
min = parseFloat(parts[0]),
max = parseFloat(parts[1] || 999); // default max = 999
return val >= min && val <= max;
}
},
filter_formatter: {
1: function ($cell, indx) {
return $.tablesorter.filterFormatter.uiSlider($cell, indx, {
values: 0,
min: 0,
max: 60,
delayed: false,
exactMatch: false,
valueToHeader: false
});
}
}
}
});
});