ColReorder with individual sorting

Pandalex · May 2021

Hi everyone,

I tried to add the colReorder option with my individual sorting but it's not working.
No error but nothing happens.

I used :
https://datatables.net/extensions/colreorder/examples/initialisation/col_filter.html

Here is my JSP:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
    <TITLE>Appli Laboratoire dev - Gestion d'habits</TITLE>
    
    <meta http-equiv='Content-type' content='text/html; charset=UTF-8'> 
    <meta name='viewport' content='width=device-width,initial-scale=1,user-scalable=no'>

    <link rel='stylesheet' type='text/css' href='Formulaire.css'>
    
    <link rel='stylesheet' type='text/css' href='https://datatables.net/media/css/site-examples.css?_=0db1cd38700c0cfcdc140c39a2ebc306'>
    <link rel='stylesheet' type='text/css' href='https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css'>
    <link rel='stylesheet' type='text/css' href='https://cdn.datatables.net/buttons/1.6.2/css/buttons.dataTables.min.css'>
    <link rel='alternate' type='application/rss+xml' title='RSS 2.0' href='http://www.datatables.net/rss.xml'>
    
    <script type='text/javascript' language='javascript' src='https://code.jquery.com/jquery-3.5.1.js'></script>
    <script type='text/javascript' language='javascript' src='https://cdn.datatables.net/1.10.21/js/jquery.dataTables.min.js'></script>
    <script type='text/javascript' language='javascript' src='https://cdn.datatables.net/buttons/1.6.2/js/dataTables.buttons.min.js'></script>
    <script type='text/javascript' language='javascript' src='https://cdn.datatables.net/buttons/1.6.2/js/buttons.flash.min.js'></script>
    <script type='text/javascript' language='javascript' src='https://cdn.datatables.net/buttons/1.6.2/js/buttons.colVis.js'></script>
    <script type='text/javascript' language='javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js'></script>
    <script type='text/javascript' language='javascript' src='https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js'></script>
    <script type='text/javascript' language='javascript' src='https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js'></script>
    <script type='text/javascript' language='javascript' src='https://cdn.datatables.net/buttons/1.6.2/js/buttons.html5.min.js'></script>
    <script type='text/javascript' language='javascript' src='https://cdn.datatables.net/buttons/1.6.2/js/buttons.print.min.js'></script>
    <script type='text/javascript' language='javascript' src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js'></script>
    <script type='text/javascript' language='javascript' src='https://cdn.datatables.net/plug-ins/1.10.19/sorting/datetime-moment.js'></script>
    <script type='text/javascript' language='javascript' src='https://cdn.datatables.net/colreorder/1.5.3/js/dataTables.colReorder.min.js'></script>
    

    <script type='text/javascript' class='init'> 
    $(document).ready(function() {  
        $.fn.dataTable.moment('DD/MM/YYYY');        
        
        // Ajout les cases de recherche pour chaque colonne
        $('#tableau tfoot th').each( function () {
            var titre = $(this).text();
            if (titre != '')
            {
                $(this).html( '<input type="text" placeholder="Recherche '+titre+'" />' );
            }
        } );
         
        // Déplace le footer du tableau en haut
        $('#tableau tfoot tr').appendTo('#tableau thead'); 
         
         // Configuration du datatable
        var table = $('#tableau').DataTable({
            dom: 'B<"clear">lfrtip',
            colReorder: true,
            paging: true,           // autorise d'avoir plusieurs pages
            pageLength: 15,         // Nombre d'enregistrements par page
            lengthChange: true,     // Permet à l'utilisateur de choisir le nombre d'enregistrement par page
            lengthMenu: [[10, 25, 50, -1], [10, 25, 50, "Tous"]], // option du paramètre ci dessus
            order: [[ 0, 'asc' ], [ 2, 'asc' ]],    // Définit le tri par défaut
            buttons: [  
                        {   
                            extend: 'print',
                            text: 'Imprimer'    // Definit le texte du bouton
                        },                      
                        'excel', 
                        'pdf',
                        {
                            extend: 'colvis',
                            text: 'Afficher/Masquer colonne'    // Definit le texte du bouton
                        }                       
                    ],      // Active les boutons au dessus du tableau, autres valeurs possible : csv, copy,
            language: {'url': 'https://cdn.datatables.net/plug-ins/a5734b29083/i18n/French.json' },
            columnDefs: [   // Modifier les paramètre pour des colonnes
                {
                 "targets": [ 5, 6 ],
                // "visible": false,
                 "searchable": false,
                 "orderable": false
               }
            ],      
            initComplete: function () {
                // Fonction utilisée pour la recherche par colonne
                this.api().columns().every( function () {
                    var that = this;
     
                    $( 'input', this.footer() ).on( 'keyup change clear', function () {
                        if ( that.search() !== this.value ) {
                            that
                                .search( this.value )
                                .draw();
                        }
                    } );
                } );
            }           
        });     
        
     } ); 
    </script>
    

    <script language="javascript">
     
     function addRecord(nom){   
        window.location.href="addHabit.jsp"; 
      }
     
      function editRecord(nom){ 
        //console.log("configServlet/"+colonne+"/"+valeur); 
        var valeurEncode = encodeURIComponent(nom);         //encode special characters
        //console.log("configServlet/"+colonne+"/"+valeurEncode);   
        window.location.href="habitServlet/"+nom; 
      }

      function deleteRecord(nom){   
        var valeurEncode = encodeURIComponent(nom);     //encode special characters
        window.location.href="deleteHabit/"+nom; 
      }  
    
    </script>
</HEAD>

<BODY> 
 
    <a href="config.jsp">
        <img src='./chuste.png' height='100'  align='left'  style="padding: 0px 10px;" >    
    </a>
    <div id='exForm'><titre>Appli Laboratoire dev - Gestion d'habits</titre></div>
    <br/><br/>
    
    <div id='exForm'><titre>Liste des habits</titre></div>
    <br/>
    <div style="padding-left:225px ;">  
        <input type="button" name="add" value="Ajouter un habit" onclick="addRecord();" class="buttonBlue">
    </div>  
    <br/>
    <table id='tableau' class='display' style='width:100%'  style="padding: 0px 10px;" >
        <thead>
            <tr>
             <th>Nom</th>
             <th>Taille</th>
             <th>Couleur</th>
             <th>Teinte</th>
             <th>Ton</th>
             <th></th>
             <th></th>
            </tr>
        </thead>
        <tbody>     
             
                    <tr>
                        <td>Habit1</td>
                        <td>XL</td>
                        <td>bleu</td>
                        <td>azur</td>
                        <td>matin</td>
                        <td><input type="button" name="edit" value="Modifier" onclick="editRecord('Habit1');" class="buttonGreen"></td>
                        <td><input type="button" name="delete" value="Supprimer" onclick="deleteRecord('Habit1');" class="buttonRed"></td>
                    </tr>
             
                    <tr>
                        <td>Habit2</td>
                        <td>L</td>
                        <td>jaune</td>
                        <td>citron</td>
                        <td></td>
                        <td><input type="button" name="edit" value="Modifier" onclick="editRecord('Habit2');" class="buttonGreen"></td>
                        <td><input type="button" name="delete" value="Supprimer" onclick="deleteRecord('Habit2');" class="buttonRed"></td>
                    </tr>
             
                    <tr>
                        <td>Habit3</td>
                        <td>XL</td>
                        <td>jaune</td>
                        <td>poussin</td>
                        <td> </td>
                        <td><input type="button" name="edit" value="Modifier" onclick="editRecord('Habit3');" class="buttonGreen"></td>
                        <td><input type="button" name="delete" value="Supprimer" onclick="deleteRecord('Habit3');" class="buttonRed"></td>
                    </tr>
             
                    <tr>
                        <td>Habit4</td>
                        <td>M</td>
                        <td>rouge</td>
                        <td>rubis</td>
                        <td>éclatant</td>
                        <td><input type="button" name="edit" value="Modifier" onclick="editRecord('Habit4');" class="buttonGreen"></td>
                        <td><input type="button" name="delete" value="Supprimer" onclick="deleteRecord('Habit4');" class="buttonRed"></td>
                    </tr>
                
        </tbody>
            <tfoot>
            <tr>
                 <th>Nom</th>
                 <th>Taille</th>
                 <th>Couleur</th>
                 <th>Teinte</th>
                 <th>Ton</th>
                 <th></th>
                 <th></th>
            </tr>
        </tfoot>
    </table>    

 </BODY>
</HTML>

What should I modify in order for the colOrder option to work ?

Thanks a lot for reading and have a nice day !

kthorngren · May 2021

Looks like you are missing colReorder.dataTables.min.css. Take a look at the CSS tab of the example you posted. Use the Download Builder to get all the correct files for your page. If this doesn't help then please provide a link to your page or a test case replicating the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Pandalex · May 2021

Thanks for your reply.
I added

<link rel='stylesheet' type='text/css' href='https://cdn.datatables.net/colreorder/1.5.3/css/colReorder.dataTables.min.css'>

But it had no effect. I still can't move the column.

=> Current test case
http://live.datatables.net/ruseniwo/1/edit?html,css,output

I tried to create a CDN link using the download builder but if I replace my manual links with the concatenated generated one I get script errors.

=> Test case with Download Builder
http://live.datatables.net/goyitasa/1/edit

The CSS tab on live.datables contains 'formulaire.css'

kthorngren · May 2021

I still can't move the column.

You can but you need to drag the second header row. Also this row has the sorting events. You will want to move the Datatables events to the top row using orderCellsTop. For example:
http://live.datatables.net/ruseniwo/2/edit

I tried to create a CDN link using the download builder but if I replace my manual links with the concatenated generated one I get script errors.

You are getting this error:

Uncaught TypeError: $.fn.dataTable.moment is not a function

You need to add the additional plugin code that you are unable to select in the Download Builder. It doesn't look like you included any of the extensions, like ColReorder, which will also cause errors. You need to select all the extensions you are interested in using on your page.

Kevin

Pandalex · May 2021

Thanks, you are great !

So now with your modification the order and the display are fine but ........

The search isn't working anymore !
Either the search by column or the global search.

I tried to look on the index side, but to no avail. You can check it on your link, the issue is here to.

Is there something to specify for it to work ?

Thanks again for your time and your help, I really appreciate.

kthorngren · May 2021

Your example is using the selector $( 'input', this.footer() ) for the event handler. This won't work because your inputs are in the second header not the footer. See this example for one way to handle search inputs in the second header.

Kevin

Pandalex · May 2021

Thanks a lot, using your tips and answers I eventually got what I wanted !

Here is the last version with order and sorting working.
http://live.datatables.net/ruseniwo/3/edit

Hopefully it will help someone else.

Pandalex · May 2021

Hi kthorngren !

So .....

I broke it again

But because I try to upgrade my app.

The flow I had was :
1) My index redirected to a ChargeHabits.java file which loaded the data then created a redirect with a JSON to my JSP

String nextJSP = "/affichage.jsp";
                RequestDispatcher dispatcher = getServletContext().getRequestDispatcher(nextJSP);
                dispatcher.forward(request,response);

Then the <td> where created using the request object.

I think, this was not the right way to do things (but maybe I'm wrong).
So what I do now, is that I access my JSP with the datatable directly: I set ajax and ChargeHabits as datasources.

It took me a while but my data is correctly displayed.

But the filters are not working anymore.
The global one is OK, but I can't get the title in my footer input and the onChange doesn't work.

I'm pretty sure it comes from the fact that the datatable loads my data AFTER I created the functions since its asynchronous but I don't know how to fix this ...

I don't know how to simulate the ajax call on live.datatables.
I created a var in the javascript with my ajax request result and it works (except the part where I get the title from the TD to fill the input 'Search XX') but if a use the Ajax call (commented), then nothing happen on the individual column search

http://live.datatables.net/ruseniwo/4/edit

Thanks for your help

Pandalex · May 2021

Found it !

Their is 'initComplete' property.

I moved my code inside :

    initComplete: function(settings, json) {
                //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() < 5)                                                         // les index 5 et 6 sont les boutons je ne veux pas recherche la dessus
                    {
                        $(this).html( '<input type="text" placeholder="Recherche '+title+'" />' );  // 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'); 
            
            }

ColReorder with individual sorting

ColReorder with individual sorting

Answers

Howdy, Stranger!

Categories

DataTables

ColReorder with individual sorting

ColReorder with individual sorting

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables