首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >具有Tablesorter的列中的数字范围

具有Tablesorter的列中的数字范围
EN

Stack Overflow用户
提问于 2013-05-31 16:17:48
回答 1查看 541关注 0票数 1

我最近遇到了一个问题。我打算使用这种类型的tablesorter与滑块滤镜,并试图修改它,但它不起作用。我需要能够与表列的数字范围(即不只是像51的单个数字,但3-8)。因此,当我在滑块过滤器上选择值5时,我需要它来显示列值为3-8的行,而不是值为51的列。

请注意,您是否有任何关于如何修改以在表格中使用数字范围的想法?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-06-02 01:17:57

您需要使用filter_formatterfilter_functions的组合,就像这样(demo):

HTML

代码语言:javascript
运行
复制
<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>

脚本

代码语言:javascript
运行
复制
$(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
                    });
                }
            }
        }
    });
});
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/16852837

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档