使用 Tablesorter 列中的数字范围 [英] Range of numbers in a column with Tablesorter

问题描述

我最近遇到了一个问题.我打算将这种类型的 tablesorter 与滑块一起使用过滤并尝试修改它，但它没有工作.我需要能够处理表格列中的数字范围(即不仅仅是像 51 这样的单个数字，而是 3-8).因此，当我在滑块过滤器上选择值 5 时，我需要它显示列值为 3-8 的行，而不是值为 51 的列.

I came across one problem lately. I intended to use this type tablesorter with slider filter and tried to modify it, but it didnt work. I need to be able to work with range of numbers in the table columns (ie not just single numbers like 51, but 3-8). So that when I pick value 5 on a slider filter, I need it to show the row with column value 3-8 and not column with value 51.

请问，您对如何修改它以使用表格中的数字范围有任何想法吗?

Please, do you have any ideas on how to modify this in order to use numeric range in the table?

推荐答案

你需要使用 filter_formatter 和 filter_functions 的组合，像这样 (演示):

You'll need to use a combination of the filter_formatter and filter_functions, like this (demo):

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

这篇关于使用 Tablesorter 列中的数字范围的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！