Is it possible to combine column filtering using select dropdowns with an external form filter

hpattern

There are hidden columns in the table and want to use an external form filter using the external hidden columns.

Code below is for the Select filter dropdown taken from an example:

<script>
    
    $(document).ready(function() {

        $('#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 ) {
                    var str = d.replace(/<.*?>/g, '');
                    var str2 = str.replace(/_/g, '');
                    select.append('<option value="' + str2 + '">' + str2 + '</option>')
                } );
            } );
        },
        "columnDefs": [
                    {
                        "targets": [3],
                        "visible": true,
                        "searchable": true,
                        "width": "10px"
                    },
                    {
                        "targets": [8],
                        "visible": false,
                        "searchable": true
                    },
                    {
                        "targets": [10],
                        "visible": false,
                        "searchable": true
                    },
                    {
                        "targets": [11],
                        "visible": true,
                        "searchable": true
                    }],
        "iDisplayLength": 20,
        "order": [[1, "asc"]],
        });
      
    } );
</script>

daniel_r

Not sure to what you refereing as external columns, but you can take a look at my yadcf plugin for datatables , see relevant showcase page externally_triggered usage , if interested - read docs externally_triggered