Javascript 在 JSFiddle 上

Question

我正在尝试在 JSFiddle 上构建一个 table分拣机。

下面是link到table。

我想要将流派和年龄分级下拉菜单设置为类似于发行日期列。我正在努力正确编码，因为当我复制我已经拥有的其他代码并将其附加到 Genre 列时，Javascript 完全停止工作。

HTML:

<table>
    <thead>
        <tr>
            <th>Video Game</th>
            <th>Release Date</th>
            <th>Genre</th>
            <th>Age Rating</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Game 1</td>
            <td>
                <ul>
                    <li>11th June</li>
                </ul>
            </td>
            <td>
                <ul>
                    <li>Sport</li>
                </ul>
            </td>
            <td>
                <ul>
                    <li>16</li>
                </ul>
            </td>
        </tr>
        <tr>
            <td>Game 2 </td>
            <td>
                <ul>
                    <li>11th July</li>
                </ul>
            </td>
            <td>
                <ul>
                    <li>Sci-Fi</li>
                </ul>
            </td>
            <td>
                <ul>
                    <li>18</li>
                </ul>
            </td>
        </tr>
    </tbody>
</table>

Javascript:

$(function () {

    $('table').tablesorter({
        theme: 'blue',
        widgets: ['filter'],
        widgetOptions: {
            filter_functions: {
                1: {
                    "January": function (e, n) {
                        return /January/.test(n);
                    },
                        "February": function (e, n) {
                        return /February/.test(n);
                    },
                        "March": function (e, n) {
                        return /March/.test(n);
                    },
                        "April": function (e, n) {
                        return /April/.test(n);
                    },
                        "May": function (e, n) {
                        return /May/.test(n);
                    },
                        "June": function (e, n) {
                        return /June/.test(n);
                    },
                        "July": function (e, n) {
                        return /July/.test(n);
                    },
                        "August": function (e, n) {
                        return /August/.test(n);
                    },
                        "September": function (e, n) {
                        return /September/.test(n);
                    },
                        "October": function (e, n) {
                        return /October/.test(n);
                    },
                        "November": function (e, n) {
                        return /November/.test(n);
                    },
                        "December": function (e, n) {
                        return /December/.test(n);
                    }

                }
            }
        }
    });

});

访问JSFiddle

Answer 1

您必须添加额外的过滤功能：

filter_functions: {
    1: {
        "January": function (e, n) {
            return /January/.test(n);
        },
        "February": function (e, n) {
            return /February/.test(n);
        },
        // other months
    },
    2: {
        "Sport": function (e, n) {
            return /Sport/.test(n);
       },
        "Sci-Fi": function (e, n) {
            return /Sci-Fi/.test(n);
       }
    },
    3: {
        "16": function (e, n) {
            return /16/.test(n);
       },
        "18": function (e, n) {
            return /18/.test(n);
       }
    }
}

它将在流派下创建下拉菜单，选项为运动和科幻，在年龄分级下创建另一个下拉菜单，选项为 16 和 18。这就是您要找的吗？

Javascript 在 JSFiddle 上

Javascript on JSFiddle

javascript

jsfiddle