Search filter on hidden column made visible
Search filter on hidden column made visible
Pandalex
Posts: 32Questions: 8Answers: 1
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>
This question has an accepted answers - jump to answer
Answers
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
But those line are **inside **the datatable definition, how should I write them outside ?
Like this:
Kevin
Thanks a lot Kevin, it works
I just had to do exactly the same with the next part
in order to have the function applied to the column