Migration to 2.0

Pandalex · May 14

Hello,

Is there a way to convert my dom to the equivalent layout ?

dom: 'QBlfrtip'

Thanks

Alex

kthorngren · May 14

Try this:

      layout: {
        top2: 'searchBuilder',
        top1: 'searchPanes'
    }

See the layout docs for details of how the dom structure is laid out. See the basic examples for SearchBuilder and SearchPanes for steps to use layout to add these components.

Kevin

Pandalex · May 14

Thanks, I was having trouble adding the button but I just need to add :

topStart: 'buttons'

I think I have one last issue with the migration.
I had the filter on top of each column but now I can't figure why I can't move them.
I can either:
- have the filter at the bottom and working
- have the filter at the top but no working

To move it I was doing

$('#tableau tfoot tr').appendTo('#tableau thead');

This is the my code right now :

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

      $('#tableau tfoot th').each(function (i) {
              
                if($(this).index() > 2)
                {
                    $(this).html(
                        '<input type="text" placeholder="Recherche" data-index="' + i + '" class="fill" />'
                    );
                }
            });

    var table = $('#tableau').DataTable({
            
            layout: {
            //    top2: 'searchBuilder',
                topStart: 'buttons'         
            },
            
            ajax: {
                    dataType: 'json',
                    type: 'GET',
                    url: '/SpicmiValidation/ChargeSpicmi/',         
                    dataSrc : ''
                },

...

{"data": 'intervention', "title": 'Intervention'},
{"data": 'idpat', "title": 'Idpat'},
{"data": 'age', "title": 'Age'},
...

language: {'url': 'https://cdn.datatables.net/plug-ins/2.0.7/i18n/fr-FR.json' },
            initComplete: function(settings, json) {                                                // Une fois la datatable initialisé on applique les fonctions de filtrage
                    
                
                // Filter event handler
                $(table.table().container()).on('keyup', 'tfoot input', function () {
                    table
                        .column($(this).data('index'))
                        .search(this.value)
                        .draw();
                });

        // Déplace le footer du tableau en haut
                $('#tableau tfoot tr').appendTo('#tableau thead'); 
             
            table.search( '' ).columns().search( '' ).draw(); // On reset les filtres quand on revient sur la page
}

...
<body>  
<table id='tableau'class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" style='width:100%'  style="padding: 0px 10px;" >
                        <thead>
                            <tr>
                             <th></th>
                             <th></th>
                             <th></th>
...

    </tr>
                        </thead>
                        <tbody>     
                        </tbody>
                        <tfoot>
                            <tr>
                             <th></th>
                             <th></th>
                             <th></th>
...

colin · May 15

@Pandalex There's nothing obvious there, could you link to an example, please. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Colin

Pandalex · May 15

Hello @colin I tried to reproduce my issue in https://live.datatables.net/ but my data is generated trough an ajax call and I don"t know how to mimic that.

Since it's in Ajax, for the filter to work I need to put keyup in the init complete of the datatable configuration :

```initComplete: function(settings, json) {
              $("#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 )                                                         
                  .draw();
                } );
             } ); ```

If I put it elsewhere the filters always return 0 data (I assume because the filters don't know what is in the table)

For this part :
$('#tableau tfoot tr').appendTo('#tableau thead');

1) If I don"t put it at all => The filter works, at the bottom
2) If I put it outside the datatables options => The filters come to the top but don't work
3) If I put it inside the initComplete => The filters don't come top and don't work

With Datables 1.1, the second way was working

I uploaded the debug : Your debug code is: erukah

allan · May 15

I don't think DataTables 2 will like moving the footer to the header after initialisation. Do it before initialisation and it should work (tweaking the rest of your code to use the second row of the header for the filtering inputs of course).

DataTables makes a full "map" of the header and footer elements during initialisation now, so it can handle the colspan / rowspan of complex headers, and multiple rows. DataTables 1 wasn't so smart.

Allan

Pandalex · May 16

Thanks for your answer !
I tried different ways to aim at the seonde row but I'm not an HTML expert and it failed (I even tried to ask chatGPT)

Could you help me a bit more ?

allan · May 16

$("#tableau thead tr').eq(1);

will get you the second row in a thead.

$(table.table().container()).on('keyup', 'tfoot input', function () {

should be updates to:

$(table.table().container()).on('keyup', 'thead input', function () {

Give that a whirl, and if no success, let me know, showing your latest code

Thanks,
Allan

Pandalex · May 16

Thank you so much for looking into it @allan

Where should I use this part ?
$("#tableau thead tr').eq(1);

If I use
$('#tableau tfoot tr').appendTo('#tableau thead');
outside the init I don't have my place holders but a second ligne with my row title

Right now my code is:

     // Déplace le footer du tableau en haut
        $('#tableau tfoot tr').appendTo('#tableau thead');  
        
        $('#tableau tfoot th').each(function (i) {            
            if($(this).index() > 2)
            {
                $(this).html(
                    '<input type="text" placeholder="Recherche" data-index="' + i + '" class="fill" />'
                );
            }
        });

then

        initComplete: function(settings, json) {                
                      // Filter event handler
                    $(table.table().container()).on('keyup', 'tfoot input', function () {
                        table
                            .column($(this).data('index'))
                            .search(this.value)
                            .draw();
                    });

I tried changing the tfoot to a thead in the init complet but since the placeholder are not there it's not usefull

allan · May 16

// Déplace le footer du tableau en haut
   $('#tableau tfoot tr').appendTo('#tableau thead');  
    
   $('#tableau tfoot th').each(function (i) {            
       if($(this).index() > 2)
       {
           $(this).html(
               '<input type="text" placeholder="Recherche" data-index="' + i + '" class="fill" />'
           );
       }
   });

Won't work, since it is trying to select elements from the tfoot row, which you've just moved to the header.

// Déplace le footer du tableau en haut
   $('#tableau tfoot tr').appendTo('#tableau thead');  
    
   $('#tableau thead tr:eq(1) th').each(function (i) {            
       if($(this).index() > 2)
       {
           $(this).html(
               '<input type="text" placeholder="Recherche" data-index="' + i + '" class="fill" />'
           );
       }
   });

Might work better for that.

Allan

Pandalex · May 16

Hmm it's the same, instead if the placeholders I get 2 titles row

Here is the full code, maybe my mistake is so obvious that you did not think it was a possibility ?

(if it helps the fixed column I can't make the fixed column works, it may be related ?)

        <script type='text/javascript' class='init'> 

    var html = '';      
    
    function format ( d ) {
        // `d` is the original data object for the row
        
            html = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">'+
            '<tr>'+
                        
                '<td><b>Age:</b></td>'+
                '<td>'+d.age+'</td>'+
            
                '<td><b>Sexe:</b></td>'+
                '<td>'+d.sexe+'</td>'+
            '<tr>'  
            ;           
            return html;
    }   
            
    $(document).ready(function() { 
        moment.locale('fr');    
    
        //$.fn.dataTable.moment('DD/MM/YYYY');
        DataTable.datetime('DD/MM/YYYY');
        
      
        $('#tableau tfoot tr').appendTo('#tableau thead'); 
        
        $('#tableau thead tr:eq(1) th').each(function (i) {           
               if($(this).index() > 2)
               {
                   $(this).html(
                       '<input type="text" placeholder="Recherche" data-index="' + i + '" class="fill" />'
                   );
               }
         });   
                
        // Configuration du datatable
        var table = $('#tableau').DataTable({           
        
            layout: {
                topStart: 'buttons',        
                top2Start: 'pageLength',
                top2End: 'search',                  
                topEnd: 'paging',                        
            },
             
            ajax: {
                    dataType: 'json',
                    type: 'GET',
                    url: '/SpicmiValidation/ChargeSpicmi/',     
                    dataSrc : ''
                },
            columns: [
                {
                    "className":      'details-control',        
                    "orderable":      false,
                    "searchable":     false,
                    "data":           null,
                    "defaultContent": ''
                },              
                { 
                   'mRender': function (data, type, full) {                    
                        return  '<input type="button" name="edit" value="" onclick="editRecord(\'' + full.intervention + '\');" class="buttonModif">';                                      
                    },
                    "orderable":      false,
                    "searchable":     false
                },
                { 
                   'mRender': function (data, type, full) {                          
                        return '<input type="button" name="delete" value="" onclick="deleteRecord(\'' + full.intervention + '\');" class="buttonSuppr">';                               
                     
                    },
                    "orderable":      false,
                    "searchable":     false
                },
                
                {"data": 'intervention', "title": 'Intervention'},
                {"data": 'idpat', "title": 'Idpat'},
                {"data": 'age', "title": 'Age'},
                {"data": 'sexe', "title": 'Sexe'},
                {"data": 'um', "title": 'UM'},
                {"data": 'dentree', "title": 'Date Entrée'},
                {"data": 'dinter', "title": 'Date Intervention'},
                {"data": 'ccam1', "title": 'CCAM 1'},
                {"data": 'dp1', "title": 'DP 1'},
                {"data": 'dreprise', "title": 'Date Reprise'},
                {"data": 'ccam2', "title": 'CCAM 2'},
                {"data": 'drehosp', "title": 'Date Réhospitalisation'},
                {"data": 'drepriseRh', "title": 'Date Reprise RH'},
                {"data": 'ccamRh', "title": 'CCAM RH'},
                {"data": 'dp2', "title": 'DP 2'},
                {"data": 'infection', "title": 'Infection'},
                {"data": 'dinf', "title": 'Date Infection'},
                {"data": 'typeiso', "title": 'Type Iso'},
                {"data": 'diagiso', "title": 'Diagnostic Iso'},
                {"data": 'prelev', "title": 'Prelev'},
                {"data": 'dprelev', "title": 'Date Prelev'},
                {"data": 'result_prelev', "title": 'Resultat Prelev'},
                {"data": 'germe1', "title": 'Germe 1'},
                {"data": 'germe2', "title": 'Germe 2'},
                {"data": 'germe3', "title": 'Germe 3'},
                {"data": 'microOrg1', "title": 'Micro Org 1', "visible":false},
                {"data": 'microOrg2', "title": 'Micro Org 2', "visible":false},
                {"data": 'microOrg3', "title": 'Micro Org 3', "visible":false},
                {"data": 'materiel1', "title": 'Materiel 1'},
                {"data": 'materiel2', "title": 'Materiel 2'},
                {"data": 'materiel3', "title": 'Materiel 3'},
                {"data": 'valchir', "title": 'Val Chir'},
                {"data": 'dureeinter', "title": 'Duree Inter'},
                {"data": 'asa', "title": 'ASA'},
                {"data": 'urgence', "title": 'Urgence'},
                {"data": 'multiple', "title": 'Multiple'},
                {"data": 'implant', "title": 'Implant'},
                {"data": 'chirurgien', "title": 'Chirurgien'},
                {"data": 'libelleGeste', "title": 'Libelle Geste'},
                {"data": 'specialite', "title": 'Specialite'},
                {"data": 'ccamComplet', "title": 'CCAM Complet'},
                {"data": 'interventionReprise', "title": 'Intervention Reprise'},
                {"data": 'libelleGesteReprise', "title": 'Geste Reprise'},
                {"data": 'delaiReprise', "title": 'Delai Reprise'},
                {"data": 'nda', "title": 'Nb diagnostics', "visible":false},
                {"data": 'ghm1', "title": 'GHM 1', "visible":false},
                {"data": 'ghm2', "title": 'GHM 2', "visible":false},
                {"data": 'dsortie', "title": 'Date Sortie', "visible":false},
                {"data": 'etatsort', "title": 'Etat Sortie', "visible":false},
                {"data": 'sens1', "title": 'Sens 1', "visible":false},
                {"data": 'sens2', "title": 'Sens 2', "visible":false},
                {"data": 'sens3', "title": 'Sens 3', "visible":false},
                {"data": 'classcont', "title": 'Class Cont', "visible":false},
                {"data": 'chirendos', "title": 'Chir Endos', "visible":false},
                {"data": 'tumeur', "title": 'Tumeur', "visible":false},
                {"data": 'diabete', "title": 'Diabete', "visible":false},
                {"data": 'hta', "title": 'Hypertension', "visible":false},
                {"data": 'immunodep', "title": 'Immunodep', "visible":false},
                {"data": 'obesite', "title": 'Obesite', "visible":false},
                {"data": 'malnutrition', "title": 'Malnutrition', "visible":false},
                {"data": 'avisInfectieux', "title": 'Avis Infectieux', "visible":false},
                {"data": 'produits', "title": 'Produits', "visible":false},
                {"data": 'commentaire', "title": 'Commentaire', "visible":false},
                {"data": 'iep', "title": 'IEP', "visible":false},
                {"data": 'iepReprise', "title": 'IEP Reprise', "visible":false},
                {"data": 'ufMed', "title": 'UF médicale', "visible":false},
                {"data": 'typeIntervention', "title": 'Type Intervention', "visible":false},
                {"data": 'typeInterventionComplet', "title": 'Type Intervention Complet', "visible":false},
                {"data": 'materielListe', "title": 'Liste materiel', "visible":false},
                {"data": 'nbprelev', "title": 'Nombre Prelev', "visible":false},
                {"data": 'nbppos', "title": 'Nombre Ppos', "visible":false},
                {"data": 'delaiBiologie', "title": 'Delai Biologie', "visible":false},
                {"data": 'dateModif', "title": 'Modifié le', "visible":false},  
                {"data": 'userModif', "title": 'Modifié par', "visible":false}
            ],          
                    
            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
            paging: true,           // autorise d'avoir plusieurs pages
            pageLength: 15,         // Nombre d'enregistrements par page
            pagingType: "full_numbers", // Indique quels boutons sont visible pour naviguer entre les pages. Full_number affiches les boutons premier/dernier, précédent/suivant et les numéros de page
            lengthChange: true,     // Permet à l'utilisateur de choisir le nombre d'enregistrement par page
            lengthMenu: [[5, 10, 25, 50, -1], [5, 10, 25, 50, "Tous"]], // option du paramètre ci dessus
            order: [[ 3, 'asc' ]],  // Définit le tri par défaut
            fixedColumns: true,
            buttons: [  
                        {   
                            extend: 'print',
                            text: 'Imprimer',   // Definit le texte du bouton
                            exportOptions: {columns: [ 3, 4, 5, 6, 7, 8, 9 ]} 
                        },
                        {
                            extend: 'excel', 
                            exportOptions: {columns: [ 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13 ]}
                        },                  
                        {
                            extend: 'colvis',
                            text: 'Afficher/Masquer colonne',           
                            columns:  [  3, 4, 5, 6, 7  ]               
                        },
                        {
                            extend: 'searchBuilder',
                            text: 'Recherche avancée',                          
                            config: {
                                depthLimit: 2,
                                columns: [5,6,10,11,19,21,22,25,26,27,34,36,41,44,45]
                            }
                        }
                    ],      
            language: {'url': 'https://cdn.datatables.net/plug-ins/2.0.7/i18n/fr-FR.json' },
            columnDefs: [
                {
                    targets: [5],
                    createdCell: function (td, cellData, rowData, row, col) {
                        if (cellData < 18) {
                            $(td).css('color', 'green');
                        }
                    }
                }
            ],
            
            initComplete: function(settings, json) {                
                      // Filter event handler
                    $(table.table().container()).on('keyup', 'tfoot input', function () {
                        table
                            .column($(this).data('index'))
                            .search(this.value)
                            .draw();
                    });             
                      
                    $('#tableau tbody').on('click', 'td.details-control', function () {
                        var tr = $(this).closest('tr');
                        var row = table.row( tr );
                 
                        if ( row.child.isShown() ) {
                            // This row is already open - close it
                            row.child.hide();
                            tr.removeClass('shown');
                        }
                        else {
                            // Open this row
                            row.child( format(row.data()) ).show();
                            tr.addClass('shown');                       
                        }                   
                     });                    
                    
                    table.search( '' ).columns().search( '' ).draw(); // On reset les filtres quand on revient sur la page
                }       
        }); 
     } ); 
    </script>

Pandalex · May 16

The body contains the footer and header squeleton :

<body>
 <div class="row" style='width:95%'>
                <div class="col-md-12" style='width:95%'>   
                    <table id='tableau'class="row-border order-column hover nowrap stripe" cellspacing="0" style='width:100%'  style="padding: 0px 10px;" >
                        <thead>
                            <tr>
                             <th></th>
                             <th></th>
                             <th></th>
                            
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                                                                
                            </tr>
                        </thead>
                        <tbody>     
                        </tbody>
                        <tfoot>
                            <tr>
                             <th></th>
                             <th></th>
                             <th></th>
                            
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                             
                             <th></th>
                             <th></th>
                             <th></th>
                             <th></th>
                                                                
                            </tr>
                        </tfoot>
                    </table>    
                </div>
            </div>
        </c:otherwise>
    </c:choose>
</body>

allan · May 16

Here's how I would do it: https://live.datatables.net/tixoyeqo/1/edit (based on this example).

Here I just cloned the header - you could clone the footer, move the footer row or whatever.

Allan

Pandalex · May 16

It works !

Almost ... the placeholder are on top and I can filter but I have to issue with this way :

1) The main one is that I use colReoder, and the filter does not follow. So if I move a column all the filters after this one will filter the wrong column

I updated the test case :
https://live.datatables.net/tixoyeqo/3/edit

2) I was using class="fill" to avoid having wide columns with small size value (like the 'age column)
Where could I put it now ?
I tried adding it to the <th></th> like <th class="fill"></th> but no success

kthorngren · May 16

To add the class to the input do something like this:

          let input = document.createElement('input');
          input.classList.add("fill");

See if this thread helps with the ColReorder issue.

Kevin

Pandalex · May 17

Thanks you very much

The input tag is perfect.

My last issue is still the reorder.
I tried to mix this example from your thread with the previous test case, without success

I'm pretty sure that I don't get the correct index with this line:

let idx = [...th.parentNode.children].indexOf(th);

I tried to changed
let th = column.footer();
to
let th = column.header(1);
(and some other variations)

But it's not working

https://live.datatables.net/tixoyeqo/5/edit

In any case, thank you for all the help you already provided

kthorngren · May 18

You are getting this error:

Uncaught ReferenceError: api is not defined

Use let api = this.api(); so api can be used in this statement:

                    api
                        .column(idx + ':visible')
                        .search(input.value)
                        .draw();

Updated test case:
https://live.datatables.net/tixoyeqo/6/edit

Kevin

Pandalex · May 21

You guys are great !

You solved everything, thanks a lot.

I'm trying to add a little tweak : I put 2 buttons as the first 2 columns.
Is there a way to hide the filters for those columns ?

If not, I'll just let the empy filter displayed

kthorngren · May 21

Is there a way to hide the filters for those columns ?

There are many ways to do this. See the column-selector docs for the options. You can specify an array of columns to apply the search inputs to. Or better is to use a class name. I updated the test case to assign the class name no_search to the columns to ignore. Then used the jQuery not() selector as the column-selector: api.columns(':not(.no_search)'):
https://live.datatables.net/tixoyeqo/8/edit

Kevin

kthorngren · May 21

Another option is to assign the class name using columns.className:
https://live.datatables.net/tixoyeqo/9/edit

Kevin

Pandalex · May 23

It's perfect with the no search

You all are really great.
Skilled and helpful, you are wonderful human beings

Thank you

Migration to 2.0

Migration to 2.0

Answers

Howdy, Stranger!

Categories

DataTables

Migration to 2.0

Migration to 2.0

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables