fnFilter Error "Uncaught TypeError:undifined is not a function"

van_izaack

Hello

I'm new on this and Im trying to connect datables with a multiple selection (http://wenzhixin.net.cn/p/multiple-select/docs/#the-basics1),, but when I try to do that it send me an error, I don't know if I need to add another js. I let the code that I'm using

    <link rel="stylesheet" type="text/css" href="..//html_files/scripts/datatables/media/css/jquery.dataTables.css">
    <link rel="stylesheet" type="text/css" href="..//html_files/scripts/datatables/examples/resources/syntax/shCore.css">
    <link rel="stylesheet" type="text/css" href="..//html_files/scripts/datatables/extensions/ColVis/css/dataTables.colVis.css">
    <link rel="stylesheet" type="text/css" href="..//html_files/scripts/datatables/extensions/ColReorder/css/dataTables.colReorder.css">
    <link rel="stylesheet" type="text/css" href="..//html_files/scripts/datatables/extensions/TableTools/css/dataTables.tableTools.css">
    <style type="text/css" class="init">

    </style>
    <script type="text/javascript" language="javascript" src="..//html_files/scripts/datatables/media/js/jquery.js"></script>
    <script type="text/javascript" language="javascript" src="..//html_files/scripts/datatables/media/js/jquery.dataTables.js"></script>
    <script type="text/javascript" language="javascript" src="..//html_files/scripts/datatables/media/src/core/core.filter.js"></script>
    <script type="text/javascript" language="javascript" src="..//html_files/scripts/datatables/examples/resources/syntax/shCore.js"></script>
    <script type="text/javascript" language="javascript" src="..//html_files/scripts/datatables/extensions/FixedColumns/js/dataTables.fixedColumns.js"></script>
    <script type="text/javascript" language="javascript" src="..//html_files/scripts/datatables/extensions/ColVis/js/dataTables.colVis.js"></script>
    <script type="text/javascript" language="javascript" src="..//html_files/scripts/datatables/extensions/ColReorder/js/dataTables.colReorder.js"></script>
    <script type="text/javascript" language="javascript" src="..//html_files/scripts/datatables/extensions/TableTools/js/dataTables.tableTools.js"></script>
    <script type="text/javascript" language="javascript" class="init">

        $(document).ready(function() {
            oTable = $('#table_data').DataTable({
                "oSearch": {"bSmart": false,
                    "bRegex": false
                },
            });

            $("#table_data tfoot th").each(function(i) {
                var text = "";
                var field_tab = "_proj";
                switch (i) {
                    case 0:
                        text = '<select id="animal_sel" name="animal_sel" multiple="multiple" style="width: 250px;text-align:center"><option value="all">---------Select All---------</option></select>';
                        field_tab = "animal" + field_tab;
                        break;
                    case 1:
                        text = '<select id="color_sel" name="color_sel" multiple="multiple" style="width: 90px"><option value="all">-Select All-</option></select>';
                        field_tab = "color" + field_tab;
                        break;
                    case 2:
                        text = '<select id="age_sel" name="age_sel" multiple="multiple" style="width: 150px"><option value="all">Select All</option></select>';
                        field_tab = "age" + field_tab;
                        break;
                }
                var select = $(text)
                        .appendTo($(this).empty())
                        ;
                $("#table_data tfoot th").on('change', function() {
                    oTable.fnFilter("Cat");
                });
                oTable.column(i).data().unique().sort().each(function(d, j) {
                    select.append('<option value="' + d + '">' + d + '</option>');
                });
            });


        });
    </script>
    <link rel="stylesheet" type="text/css" href="..//html_files/scripts/multiselects/jquery.multiselect.css" />
    <link rel="stylesheet" type="text/css" href="..//html_files/scripts/multiselects/style.css" />
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/ui-lightness/jquery-ui.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
    <link rel="stylesheet" type="text/css" href="..//html_files/scripts/multiselects/prettify.css" />
    <script type="text/javascript" src="..//html_files/scripts/multiselects/jquery.multiselect.js"></script>
    <script type="text/javascript" src="..//html_files/scripts/multiselects/prettify.js"></script>
    <script type="text/javascript">
        $(function() {

            $("select").multiselect();

        });
    </script>

Thanks in advanced