Search filter on hidden column made visible

Pandalex

Hi everyone,

So here is the issue I'm trying to figure out:
I have some hidden columns and I want to be able to filter them once I unhide them using the button.
- For the fields visible by default the search field is here
- For a field displayed through 'colvis' the search field is not here
- The global search field is working fine even with the hidden column
- The hidden column are also displayed as childs

I think is related to my initComplete, the column not visible must not have an index ?

    $(document).ready(function() { 
        moment.locale('fr');
    
        $.fn.dataTable.moment('DD/MM/YYYY');
         
         // Configuration du datatable
        var table = $('#tableau').DataTable({           
            ajax: {
                    dataType: 'json',
                    type: 'GET',
                    url: '/Thanact/ChargeThanact/',         // Servlet générant le Json qui sert de source de données au tableau
                    dataSrc : ''
                },
            columns: [
                {
                    "className":      'details-control',                    // première colonne, la class est définie dans le CSS et affiche les boutons + - 
                    "orderable":      false,
                    "searchable":     false,
                    "data":           null,
                    "defaultContent": ''
                },
                {"data": 'idIML', "title": 'Identifiant'},
                {"data": 'nomDefunt', "title": 'Nom'},
                                
                {"data": 'ageDeces', "title": 'Age', "visible":false},              
                {"data": 'medecin1', "title": 'Médecin 1', "visible":false},    

                { 
                   'mRender': function (data, type, full) {
                       // Affichage du bouton selon groupe AD
                       if(authScript.includes('Admin'))
                       {
                        return '<input type="button" name="delete" value="Supprimer" onclick="deleteRecord(\'' + full.nom + '\');" class="buttonRed">';                                
                       }
                       else
                       {
                        return '';   
                       }                        
                    },
                    "orderable":      false,
                    "searchable":     false
                }
            ],                  
            dom: 'Blfrtip',         //Chaque lettre représente un fonction du dataTable, exemple le 'l' permet de gérer le pagelength
            colReorder: true,
            orderCellsTop: true,
            autoWidth: true,
            stateSave: true,        // permet de sauver les préférences utilisateur
            stateDuration: 0,       // 0, garde indefiniment en local. Mettre -1 le sauve la durée de la session
            buttons: [  

                        {
                            extend: 'colvis',
                            text: 'Afficher/Masquer colonne',           // Definit le texte du bouton
                            columns:  [ 1, 2, 3, 4, 5, 6]                   // indique quelles colonnes peuvent êtres affichées/cachées
                        }                       
                    ],  
            language: {'url': 'https://cdn.datatables.net/plug-ins/a5734b29083/i18n/French.json' },
            initComplete: function(settings, json) {                                                // Une fois la datatable initialisé on applique les fonctions de filtrage
                //alert( 'DataTables has finished its initialisation.' );
                $('#tableau tfoot th').each( function () {                                          // Parcours de chaque élément tr de tfoot du tableau
                    var title = $('#tableau thead th').eq( $(this).index() ).text();                // Récupération du texte des élément th du thead au même index que le footer
                    if($(this).index() > 0 ) )                  {
                        $(this).html( '<input type="text" placeholder="Recherche '+title+'" class="fill" />' ); // on rempli le footer avec un input
                    }
                } );   

                // Apply the filter
                $("#tableau tfoot input").on( 'keyup change', function () {                         // Ajout d'une fonction lors de la pression d'un touche dans les input du footer
                    table
                    .column( $(this).parent().index()+':visible' )
                    .search( this.value )                                                           //  Honnêtement je en comprend pas trop la logique ....
                    .draw();
                } );
                     
                // Déplace le footer du tableau en haut
                $('#tableau tfoot tr').appendTo('#tableau thead');          
                
            }       
        });     
        
     } ); 
    </script>

kthorngren

Try moving line 61-66, that are adding the column search inputs, to execute before the Datataables initialization, line 5 for example. This way all the header elements are visible when the inputs are created.

Kevin

Pandalex

But those line are **inside **the datatable definition, how should I write them outside ?

kthorngren

Like this:

$(document).ready(function() {
    moment.locale('fr');
 
    $.fn.dataTable.moment('DD/MM/YYYY');

            $('#tableau tfoot th').each( function () {                                          // Parcours de chaque élément tr de tfoot du tableau
                var title = $('#tableau thead th').eq( $(this).index() ).text();                // Récupération du texte des élément th du thead au même index que le footer
                if($(this).index() > 0 ) )                  {
                    $(this).html( '<input type="text" placeholder="Recherche '+title+'" class="fill" />' ); // on rempli le footer avec un input
                }
            } );  
      
     // Configuration du datatable
    var table = $('#tableau').DataTable({          
        ajax: {
 ..... cut config ....
       initComplete: function(settings, json) {                                                // Une fois la datatable initialisé on applique les fonctions de filtrage
            //alert( 'DataTables has finished its initialisation.' );
 
            // Apply the filter
            $("#tableau tfoot input").on( 'keyup change', function () {                         // Ajout d'une fonction lors de la pression d'un touche dans les input du footer
                table
                .column( $(this).parent().index()+':visible' )
                .search( this.value )                                                           //  Honnêtement je en comprend pas trop la logique ....
                .draw();
            } );
                  
            // Déplace le footer du tableau en haut
            $('#tableau tfoot tr').appendTo('#tableau thead');         
             
        }      
    });    
     
 } );

Kevin

Pandalex

Thanks a lot Kevin, it works
I just had to do exactly the same with the next part

            // Apply the filter
            $("#tableau tfoot input").on( 'keyup change', function () {                         // Ajout d'une fonction lors de la pression d'un touche dans les input du footer
                table
                .column( $(this).parent().index()+':visible' )
                .search( this.value )                                                           //  Honnêtement je en comprend pas trop la logique ....
                .draw();
            } );

in order to have the function applied to the column