Column search using Select - not showing

georgeforster

I'm trying to get the table looking like the example on this page

https://datatables.net/examples/api/multi_filter_select.html

my JavaScript is

<link rel="stylesheet" type="text/css" href="/main.css" />
<link rel="stylesheet" type="text/css" href="/table.css" media="all">
<link rel="stylesheet" type="text/css" href="/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css">

<script src="//code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/buttons/1.4.2/js/buttons.print.min.js"></script>

<script>

$(document).ready(function() {

    $('table.example').DataTable( {

        initComplete: function () {

            this.api().columns().every( function () {

                var column = this;

                var select = $('<select><option value=""></option></select>')

                    .appendTo( $(column.footer()).empty() )

                    .on( 'change', function () {

                        var val = $.fn.dataTable.util.escapeRegex(

                            $(this).val()

                        );

 

                        column

                            .search( val ? '^'+val+'$' : '', true, false )

                            .draw();

                    } );

 

                column.data().unique().sort().each( function ( d, j ) {

                    select.append( '<option value="'+d+'">'+d+'</option>' )

                } );

            } );

        }

    } );

} );
</script>

and my table html is

                <div class="table" style="font-size: 0.8em">
                    <table class="example display">

The output is on this page

http://flywestwind.org/AircraftScenery/AircraftListtest.php

So what have I missed??

georgeforster

OK, so I've worked it out, if you don't have a footer with the right number of cells then the filters do not get shown. In the example the table footer was listed above the body so it wasn't obvious that it was there.