Javascript on JSFiddle

Question

I'm trying to build a tablesorter on JSFiddle.

The link to the table is below.

I'm wanting to make the Genre and Age Rating drop down menus like the Release Date column. I'm struggling to code it correctly, as when I copy the other code I already have and attach it to the Genre columns then the Javascript stops working completely.

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

                }
            }
        }
    });

});

Visit the JSFiddle

Answer 1

You have to add additonal filter functions:

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

It will create dropdown menus under Genre with the options Sport and Sci-Fi and another one under Age Rating with the options 16 and 18. Is that what you're looking for?