DataTable Column filtering Help

paco7777

Hi every body, I would like to use the columns filtering, but it doesn't work !

I would like to do as this exemple:
https://datatables.net/extensions/fixedheader/examples/options/columnFiltering.html

The input are in good place, but the search is not working.

This is my code:

<!-- Insert this where you want the table to appears -->
<div id="datatable">Loading...</div>
<script src="{{ asset('bundles/datatables/js/datatables.js') }}"></script>

<script>

$(function() {  
 
    $('#datatable').initDataTables({{ datatable_settings(datatable) }}, {
        searching: true,
        lengthChange: false,
        initComplete: function () {
            // Setup - add a text input to each footer cell
            $('#dt thead tr').clone(false).appendTo( '#dt thead' );
            $('#dt thead tr:eq(1) th').each( function (i) {
                var title = $(this).text();
                $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
        
                $( 'input', this ).on( 'keyup change', function () {
                    if ( table.column(i).search() !== this.value ) {
                        table
                            .column(i)
                            .search( this.value )
                            .draw();
                    }
                } );
            } );
        }
    });

    var table = $('#dt').DataTable( {
        orderCellsTop: true,
        fixedHeader: true
    });
    
});

</script>

Thanks for your attention

kthorngren

Without seeing the problem it will be hard to say. I'm not sure how $('#datatable').initDataTables(...) works and what it does. Can you post a link to your page or a test case replicating the issue so we can help debug?
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

paco7777

Unfortunately I work locally, my dataTable loads data from a USER entity. When I make a console.log (table), it returns an empty array. I'm working on Symfony 5

paco7777

kthorngren

I think I see the problem. You have the code to build the inputs and event listeners in initComplete. Taking a look at the example it is executed before Datatables initialization. One of the things the fixedHeader option does is clone the header in order for it to work. Try moving the code before you init Datatables.

Kevin

paco7777

Sorry I'm going to sound stupid, but what bit of code should I move ?

kthorngren

This code:

            // Setup - add a text input to each footer cell
            $('#dt thead tr').clone(false).appendTo( '#dt thead' );
            $('#dt thead tr:eq(1) th').each( function (i) {
                var title = $(this).text();
                $(this).html( '<input type="text" placeholder="Search '+title+'" />' );
         
                $( 'input', this ).on( 'keyup change', function () {
                    if ( table.column(i).search() !== this.value ) {
                        table
                            .column(i)
                            .search( this.value )
                            .draw();
                    }
                } );
            } );

Follow the example.

Kevin