Migration to 2.0

Migration to 2.0

PandalexPandalex Posts: 27Questions: 7Answers: 1
edited May 14 in Free community support

Hello,

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

dom: 'QBlfrtip'

Thanks

Alex

Answers

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794
    edited 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

  • PandalexPandalex Posts: 27Questions: 7Answers: 1

    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 :smile:

    $('#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>
    ...
    
  • colincolin Posts: 15,177Questions: 1Answers: 2,590

    @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

  • PandalexPandalex Posts: 27Questions: 7Answers: 1

    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

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    edited 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

  • PandalexPandalex Posts: 27Questions: 7Answers: 1
    edited 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 ?

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    $("#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

  • PandalexPandalex Posts: 27Questions: 7Answers: 1

    Thank you so much for looking into it @allan :smile:

    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

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin
    // 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

  • PandalexPandalex Posts: 27Questions: 7Answers: 1

    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>
    
  • PandalexPandalex Posts: 27Questions: 7Answers: 1

    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>
    
  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • PandalexPandalex Posts: 27Questions: 7Answers: 1

    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

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

    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

  • PandalexPandalex Posts: 27Questions: 7Answers: 1
    edited May 17

    Thanks you very much <3

    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

  • kthorngrenkthorngren Posts: 20,425Questions: 26Answers: 4,794

    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

Sign In or Register to comment.