JSFiddle上的Javascript

Question

我试图在JSFiddle上构建一个tablesorter。

表格的链接如下。

我想要制作类型和年龄等级下拉菜单，例如发布日期列。我正在努力正确编码，因为当我复制我已经拥有的其他代码并将其附加到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);
       }
    }
}

它将在Genre下创建下拉菜单，其中包括Sport和Sci-Fi选项以及另一个在Age Rating下使用选项16和18的下拉菜单。这是您正在寻找的吗？