Selects disappearing after filtering or sorting.

v0wels

I'm taking code from the Individual Column Searching (select inputs) page, and I think there might be an incompatibility between the code and my DataTable options. Every time I either select an option from one of the select menus, or click a column header to sort it, the select menus disappear. My code is below:

        var table = $('#mytable').DataTable( {
            "scrollY": 500,
            "scrollX": true,
            "paging":   false,
            "searching": false
        } );
        $("#mytable thead th").each( function ( i ) {
            var select = $('<select><option value=""></option></select>')
                .appendTo( $(this).empty() )
                .on( 'change', function () {
                    var val = $(this).val();
     
                    table.column( i )
                        .search( val ? '^'+$(this).val()+'$' : val, true, false )
                        .draw();
                } );
     
            table.column( i ).data().unique().sort().each( function ( d, j ) {
                select.append( '<option value="'+d+'">'+d+'</option>' );
            } );
        } );

tangerine

Why do you have "searching": false if you want to search (select) ?

v0wels

Thanks tangerine, I figured out the issue. searching: false was definitely the first issue. The other was that I was using scrollx and still trying to append to my default table. Changing my second instance of #mytable on line 7 to .dataTables_scrollHead was the second thing that fixed my problem.