javascript - DataTable - Why can't I get individual column searching (select inputs) working? -

i'm using javascript table goodies-pack datatables.net , i've come across feature fits need, individual column searching (select inputs), found here.

this feature allows drill-down on column data, filtering down.

i've tried standard implementation no luck. find no specific field on implementation , have tried removing other properties.

my code is:

<script type="text/javascript">     $(document).ready(function() {         $('#alertlogtable').datatable( {             language: {                 url: '//cdn.datatables.net/plug-ins/1.10.11/i18n/portuguese-brasil.json'             },             responsive: true,             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> 

the demo on datatables.net page shows buttons beneath each column filter it. don't , filtering feature. missing here?

your code works fine. 100% have forgotten include <tfoot> section. footer not added magic, if <tfoot> not present <select>'s inserted nothing. remember :

<table>   <thead>     <tr><th></th></tr>   </thead>   <tbody>     <tr><td></td></tr>   </tbody>   <tfoot>     <tr><th></th></tr>   </tfoot> </table>