Retreive data from rows selected to update my table

Retreive data from rows selected to update my table

diedeerdiedeer Posts: 16Questions: 2Answers: 0

Hello,
I would like to select several lines and get idDelivery to update fields date, numberParcels, idReceptionist from my delivery table.
Debugger code : otoxog

When I make a first selection (click checkbox) nothing appears in the console, it is only when I make a second selection that in the console I see the different fields of the selected rows. I don't understand why during the first click nothing is displayed in the console.
And I'm not sure I'm using the right way
Regards.

Answers

  • allanallan Posts: 63,602Questions: 1Answers: 10,486 Site admin

    You are going to have to give me a little bit more of a clue of what is being used. Ideally a link to the page showing the issue, but if that isn't possible some screenshots and the code for the DataTable.

    Allan

  • diedeerdiedeer Posts: 16Questions: 2Answers: 0
    <?php foreach($this->Livraison as $receptLivraison) : ?> <?php if( $this->escape($receptLivraison->idReceptionniste) == 5913 ){ ?> escape($receptLivraison->idReceptionniste) == 5913 ) { echo 'class="livraisonMagasin"'; } ?>> <?php }?> <?php endforeach; ?>
    0 1 Date de préparation 2-Expéditeur 3-Transporteur 4-colis 5-No  de  commande 6-No de repérage 7-No récept. Peoplesoft 8-Destinataire 9-Livr. au local 10-Réceptionnée par 11-Commentaire 12-Modifier 13 14-idLivraison 15-idReceptionniste
    <?php echo $this->escape($receptLivraison->dateLivraison);?> <?php echo $this->escape($receptLivraison->nomExpediteur);?> <?php echo $this->escape($receptLivraison->nomTransporteur);?> <?php echo $this->escape($receptLivraison->nbreColis);?> <?php echo $this->escape($receptLivraison->noCommande);?> <?php echo $this->escape($receptLivraison->noReperage);?> <?php echo $this->escape($receptLivraison->noReceptPeoplesoft);?> <?php echo $this->escape($receptLivraison->nomClient);?> <?php echo $this->escape($receptLivraison->idLocalDest);?> <?php echo $this->escape($receptLivraison->nomRecept);?> <?php echo $this->escape($receptLivraison->commentaire);?> url(array('controller'=>'index-livraison-magasin','action'=>'form-edit-livraison-magasin','idLivraison'=>$receptLivraison->idLivraison,'idDestinataire'=>$receptLivraison->idDestinataire));?>" title="Modifier la Livraison"> image url(array('controller'=>'index-livraison-magasin','action'=>'form-delete-livraison-magasin','idLivraison'=>$receptLivraison->idLivraison));?>" title="Supprimer la Livraison"> image <?php echo $this->escape($receptLivraison->idLivraison);?> <?php echo $this->escape($receptLivraison->idReceptionniste);?>
    let table = new DataTable('#datatables', { select: true, buttons: [ { extend: 'selected', action: function ( e, dt, node, config ) { var rows = dt.rows( { selected: true } ).count(); alert( 'There are '+rows+'(s) selected in the table' ); } } ], layout: { }, columnDefs: [ { targets: 0, className: 'dt-head-center'}, /* Case à cocher */ { targets: 0, className: 'dt-body-center'}, { data: 'name[, ]'}, { width: '10px', targets: [ 0 ] }, { targets: 0, visible: true, searchable: false}, { orderable: false, targets: 0 }, { render: DataTable.render.select(), targets: 0}, { targets: 1, className: 'dt-head-center'}, /* Date de livraison */ { targets: 1, className: 'dt-body-center'}, { width: '50px', targets: [ 1 ] }, { targets: 1, visible: true, searchable: true}, { orderable: true, targets: 1 }, { targets: 2, className: 'dt-head-center'}, /* Expéditeur */ { targets: 2, className: 'dt-body-center'}, { width: '250px', targets: [ 2 ] }, { targets: 2, visible: false, searchable: true}, { orderable: true, targets: 2 }, { targets: 3, className: 'dt-head-center'}, /* Transporteur */ { targets: 3, className: 'dt-body-center'}, { width: '250px', targets: [ 3 ] }, { targets: 3, visible: true, searchable: true}, { orderable: true, targets: 3 }, { targets: 4, className: 'dt-head-center'}, /* Nbre de colis */ { targets: 4, className: 'dt-body-center'}, { width: '5px', targets: [ 4 ] }, { targets: 4, visible: true, searchable: true}, { orderable: false, targets: 4 }, { targets: 5, className: 'dt-head-center'}, /* No de commande */ { targets: 5, className: 'dt-body-center'}, { width: '150px', targets: [ 5 ] }, { targets: 5, visible: true, searchable: true}, { orderable: true, targets: 5 }, { targets: 6, className: 'dt-head-center'}, /* No de repérage */ { targets: 6, className: 'dt-body-left'}, { width: '10px', targets: [ 6 ] }, { targets: 6, visible: false, searchable: true}, { orderable: true, targets: 6 }, { targets: 7, className: 'dt-head-center'}, /* No de recept. PeopleSoft */ { targets: 7, className: 'dt-body-left'}, { width: '10px', targets: [ 7 ] }, { targets: 7, visible: false, searchable: true}, { orderable: true, targets: 7 }, { targets: 8, className: 'dt-head-center'}, /* Destinataire */ { targets: 8, className: 'dt-body-center'}, { width: '250px', targets: [ 8 ] }, { targets: 8, visible: true, searchable: true}, { orderable: true, targets: 8 }, { targets: 9, className: 'dt-head-center'}, /* Livrée au local */ { targets: 9, className: 'dt-body-center'}, { width: '20px', targets: [ 9 ] }, { orderable: true, targets: 9 }, { targets: 9, visible: true }, { targets: 10, className: 'dt-head-center'}, /* Réceptionnée par */ { targets: 10, className: 'dt-body-center'}, { width: '150px', targets: [ 10 ] }, { orderable: true, targets: 10 }, { targets: 10, visible: false }, { targets: 11, className: 'dt-head-center'}, /* Commentaire */ { targets: 11, className: 'dt-body-center'}, { width: '150px', targets: [ 11 ] }, { orderable: false, targets: 11 }, { targets: 11, visible: false }, { targets: 12, className: 'dt-head-center'}, /* Modifier */ { targets: 12, className: 'dt-body-center'}, { width: '40px', targets: [ 12 ] }, { orderable: false, targets: 12 }, { targets: 12, visible: true }, { targets: 13, className: 'dt-head-center'}, /* Supprimer */ { targets: 13, className: 'dt-body-center'}, { width: '40px', targets: [ 13 ] }, { orderable: false, targets: 13 }, { targets: 13, visible: false }, { targets: 14, className: 'dt-head-center'}, /* idLivraison */ { targets: 14, className: 'dt-body-center'}, { width: '40px', targets: [ 14 ] }, { orderable: false, targets: 14 }, { targets: 14, visible: true }, { targets: 15, className: 'dt-head-center'}, /* idReceptionniste */ { targets: 15, className: 'dt-body-center'}, { width: '40px', targets: [ 15 ] }, { orderable: false, targets: 15 }, { targets: 15, visible: true }, ], columns: [ { data: 'checkbox-0' }, { data: 'date_de_livraison-1' }, { data: 'expediteur-2' }, { data: 'transporteur-3' }, { data: 'nbre_de_colis-4' }, { data: 'no_de_commande-5' }, { data: 'no_de_reperage-6' }, { data: 'no_de_recept_PSoft-7'}, { data: 'destinataire-8' }, { data: 'livree_au_local-9' }, { data: 'receptionnee_par-10' }, { data: 'commentaire-11' }, { data: 'Modifier-12' }, { data: 'Supprimer-13' }, { data: 'idLivraison-14' }, { data: 'idReceptionniste-15' } ], fixedColumns: { start: 1 }, order: [[1, 'asc']], paging: true, select: { style: 'multi', selector: 'td:first-child' } }); table.on( 'click', 'tr', function () { table.rows({ selected: true }).data(); var rowLivr = table.rows({ selected: true }).data(); console.log(rowLivr); });
  • diedeerdiedeer Posts: 16Questions: 2Answers: 0

    Sorry. Forgot '''

  • diedeerdiedeer Posts: 16Questions: 2Answers: 0

    Hell Allan,
    Here is the code.

    <div>
      <div>
        <table id="datatables" class="display compact cell-border" style="width:100%" data-order='[[ 1, "desc" ]]' >
            <thead>
              <tr role="row">
                <th>0</th>
                <th>1 Date&nbsp;de&nbsp;préparation</th>
                <th>2-Expéditeur</th>
                <th>3-Transporteur</th>
                <th>4-colis</th>
                <th>5-No&nbsp;&nbsp;de&nbsp;&nbsp;commande</th>
                <th>6-No&nbsp;de&nbsp;repérage</th>
                <th>7-No&nbsp;récept.&nbsp;Peoplesoft</th>
                <th>8-Destinataire</th>
                <th>9-Livr. au local</th>
                <th>10-Réceptionnée par</th>
                <th>11-Commentaire</th>
                <th>12-Modifier</th>
                <th>13</th>
                <th>14-idLivraison</th>     
                <th>15-idReceptionniste</th>               
              </tr>
            </thead> 
            <tbody>          
            <?php foreach($this->Livraison as $receptLivraison) : ?>
              <?php if( $this->escape($receptLivraison->idReceptionniste) == 5913 ){ ?>        
                  <tr <?php if( $this->escape($receptLivraison->idReceptionniste) == 5913 ) { echo 'class="livraisonMagasin"'; } ?>> 
                    <td></td>
                    <td> <?php echo $this->escape($receptLivraison->dateLivraison);?>      </td>
                    <td> <?php echo $this->escape($receptLivraison->nomExpediteur);?>      </td> 
                    <td> <?php echo $this->escape($receptLivraison->nomTransporteur);?>    </td>      
                    <td> <?php echo $this->escape($receptLivraison->nbreColis);?>          </td> 
                    <td> <?php echo $this->escape($receptLivraison->noCommande);?>         </td>                
                    <td> <?php echo $this->escape($receptLivraison->noReperage);?>         </td> 
                    <td> <?php echo $this->escape($receptLivraison->noReceptPeoplesoft);?> </td> 
                    <td> <?php echo $this->escape($receptLivraison->nomClient);?>          </td> 
                    <td> <?php echo $this->escape($receptLivraison->idLocalDest);?>        </td>                                
                    <td> <?php echo $this->escape($receptLivraison->nomRecept);?>          </td>    
                    <td> <?php echo $this->escape($receptLivraison->commentaire);?>        </td>                                       
                    <td>               
                        <a class="ajax" href="<?php echo 
                        $this->url(array('controller'=>'index-livraison-magasin','action'=>'form-edit-livraison-magasin','idLivraison'=>$receptLivraison->idLivraison,'idDestinataire'=>$receptLivraison->idDestinataire));?>" title="Modifier la Livraison">
                            <img src="/frontend/images/icones/pencil.png" width="10" height="9"></a>                 
                    </td>
                    <td>                
                        <a class="ajax_confirmDelete" href="<?php echo $this->url(array('controller'=>'index-livraison-magasin','action'=>'form-delete-livraison-magasin','idLivraison'=>$receptLivraison->idLivraison));?>" title="Supprimer la Livraison">
                            <img src="/frontend/images/icones/cancel.png" width="10" height="9"></a>                                  
                    </td> 
                    <td> <?php echo $this->escape($receptLivraison->idLivraison);?>        </td> 
                    <td> <?php echo $this->escape($receptLivraison->idReceptionniste);?>   </td>                                     
                </tr>
              <?php }?>
            <?php endforeach; ?> 
            </tbody>                                                             
        </table>
      </div>
    </div>                  
    
    <script> 
        
    let table = new DataTable('#datatables', {
        
        select: true,
        buttons: [
            {
                extend: 'selected',
                action: function ( e, dt, node, config ) {
                    var rows = dt.rows( { selected: true } ).count();
     
                    alert( 'There are '+rows+'(s) selected in the table' );
                }
            }
        ],
        layout: {
        },
        columnDefs: [
     
            { targets: 0, className: 'dt-head-center'},   /*  Case à cocher */
            { targets: 0, className: 'dt-body-center'},
            { data: 'name[, ]'},
            { width: '10px', targets: [ 0 ] },              
            { targets: 0, visible: true, searchable: false}, 
            { orderable: false, targets: 0 },
            { render: DataTable.render.select(), targets: 0},
                    
            { targets: 1, className: 'dt-head-center'},   /* Date de livraison */
            { targets: 1, className: 'dt-body-center'}, 
            { width: '50px', targets: [ 1 ] },
            { targets: 1, visible: true, searchable: true},
            { orderable: true, targets: 1 },
                        
            { targets: 2, className: 'dt-head-center'},   /* Expéditeur */
            { targets: 2, className: 'dt-body-center'},
            { width: '250px', targets: [ 2 ] },
            { targets: 2, visible: false, searchable: true},
            { orderable: true, targets: 2 },
            
            { targets: 3, className: 'dt-head-center'},   /* Transporteur */
            { targets: 3, className: 'dt-body-center'},     
            { width: '250px', targets: [ 3 ] },
            { targets: 3, visible: true, searchable: true},
            { orderable: true, targets: 3 },
            
            { targets: 4, className: 'dt-head-center'},   /* Nbre de colis */
            { targets: 4, className: 'dt-body-center'}, 
            { width: '5px', targets: [ 4 ] },
            { targets: 4, visible: true, searchable: true},         
            { orderable: false, targets: 4 },
    
            { targets: 5, className: 'dt-head-center'},   /* No de commande */
            { targets: 5, className: 'dt-body-center'}, 
            { width: '150px', targets: [ 5 ] },
            { targets: 5, visible: true, searchable: true},
            { orderable: true, targets: 5 },
    
            { targets: 6, className: 'dt-head-center'},   /* No de repérage */
            { targets: 6, className: 'dt-body-left'},   
            { width: '10px', targets: [ 6 ] },
            { targets: 6, visible: false, searchable: true},
            { orderable: true, targets: 6 },
    
            { targets: 7, className: 'dt-head-center'},   /* No de recept. PeopleSoft */
            { targets: 7, className: 'dt-body-left'},   
            { width: '10px', targets: [ 7 ] },
            { targets: 7, visible: false, searchable: true},
            { orderable: true, targets: 7 },
    
            { targets: 8, className: 'dt-head-center'},   /* Destinataire */
            { targets: 8, className: 'dt-body-center'},         
            { width: '250px', targets: [ 8 ] },
            { targets: 8, visible: true, searchable: true},
            { orderable: true, targets: 8 },
            
            { targets: 9, className: 'dt-head-center'},   /* Livrée au local */
            { targets: 9, className: 'dt-body-center'},
            { width: '20px', targets: [ 9 ] },            
            { orderable: true, targets: 9 },
            { targets: 9, visible: true  },              
    
            { targets: 10, className: 'dt-head-center'},   /* Réceptionnée par */
            { targets: 10, className: 'dt-body-center'},
            { width: '150px', targets: [ 10 ] },            
            { orderable: true, targets: 10 },
            { targets: 10, visible: false  },   
                    
            { targets: 11, className: 'dt-head-center'},   /* Commentaire */
            { targets: 11, className: 'dt-body-center'},
            { width: '150px', targets: [ 11 ] },            
            { orderable: false, targets: 11 },
            { targets: 11, visible: false  },  
    
            { targets: 12, className: 'dt-head-center'},   /* Modifier */
            { targets: 12, className: 'dt-body-center'},                        
            { width: '40px', targets: [ 12 ] },          
            { orderable: false, targets: 12 },    
            { targets: 12, visible: true },                 
            
            { targets: 13, className: 'dt-head-center'},   /* Supprimer */
            { targets: 13, className: 'dt-body-center'},
            { width: '40px', targets: [ 13 ] },          
            { orderable: false, targets: 13 },    
            { targets: 13, visible: false }, 
            
            { targets: 14, className: 'dt-head-center'},   /* idLivraison */
            { targets: 14, className: 'dt-body-center'},
            { width: '40px', targets: [ 14 ] },          
            { orderable: false, targets: 14 },    
            { targets: 14, visible: true }, 
    
            { targets: 15, className: 'dt-head-center'},   /* idReceptionniste */
            { targets: 15, className: 'dt-body-center'},
            { width: '40px', targets: [ 15 ] },          
            { orderable: false, targets: 15 },    
            { targets: 15, visible: true },             
    //        
          ],
    //
          columns: [
              { data: 'checkbox-0' },
              { data: 'date_de_livraison-1' },
              { data: 'expediteur-2' },
              { data: 'transporteur-3' },
              { data: 'nbre_de_colis-4' },
              { data: 'no_de_commande-5' },
              { data: 'no_de_reperage-6' },
              { data: 'no_de_recept_PSoft-7'},
              { data: 'destinataire-8' },
              { data: 'livree_au_local-9' },
              { data: 'receptionnee_par-10' },
              { data: 'commentaire-11' },
              { data: 'Modifier-12' },
              { data: 'Supprimer-13' },
              { data: 'idLivraison-14' },
              { data: 'idReceptionniste-15' }
          ],
    //
          fixedColumns: {
            start: 1
          },
    //  
        order: [[1, 'asc']],
        paging: true,
        select: {
          style: 'multi',
          selector: 'td:first-child'
        }/*,
        checkboxes: {
          selectRow: true,
        }   */ 
    });
    
    table.on( 'click', 'tr', function () {
        //var data = $('#datatables').DataTable().row('.selected').data();
        table.rows({ selected: true }).data();
        var rowLivr = table.rows({ selected: true }).data();
    
        //alert(rowLivr);
      console.log(rowLivr);
    });
    </script>
    
  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961
    edited November 5

    Use the select event to perform actions when a row is selected. Replace the click event on 212 with the select event. See this example.

    It might be that the tr click event executes before Datatables selects the row so the value of rowLivr is an empty array.

    Kevin

  • diedeerdiedeer Posts: 16Questions: 2Answers: 0

    Hi

    Thank you!
    It works with :

    table
    .on('select', function (e, dt, type, indexes) {
        let rowData = table
            .rows(indexes)
            .data()
            .toArray();
        message('<b>' + type + ' selection</b> - ' + JSON.stringify(rowData));    
    })
    
  • diedeerdiedeer Posts: 16Questions: 2Answers: 0

    Hi,
    Now I can't manage to get the idLivraison based on the demo script here:

    https://live.datatables.net/feqekoje/39/edit

    I don't understand how to use/replace/place "data('id')", may I have to change id to idLivraison? I changed my td to <td id="data-id">... nothing works.

    I receive an "undefined" in console.log()
    Many thanks for your help.

    ```
    table.on('select', function () {

    var rows = table.rows( {selected: true} ).indexes();
    var data = table.cells(rows, 1, ).nodes().to$();
    
    $.each( data, function( key, value ) {
      console.log('id: ', $(value).data('id'));
    });    
    

    })
    ```

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961

    Now I can't manage to get the idLivraison

    What is idLivraison. Do you mean something defined with columns.data like { data: 'idLivraison-14' }. If so then use cells().data() instead of cells().nodes().

    I don't understand how to use/replace/place "data('id')", may I have to change id to idLivraison?

    I'm not sure in what context you are referring to. Please provide more details.

    I changed my td to <td id="data-id">... nothing works.

    Your test case seems to work.

    Kevin

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961

    Maybe you are looking for something like this:
    https://live.datatables.net/feqekoje/42/edit

    It uses rows().data() to get the selected rows. Then uses pluck() to get the name data object ( see columns.data config ) followed by toArray() to convert the Datatables API result set to a Javascript array.

    Kevin

  • diedeerdiedeer Posts: 16Questions: 2Answers: 0

    Hi kthorngren,

    The test case is not from me, I just take the script code.
    In this script code, it used id and #data-id and i don't see the link between the two to adapt it to my idLivraison(-14).

    In the script I sent at first I use checkboxes and multi-select to get the values of idLivraison-14 (is the same as idLivraison) for each rows is selected to be abble to update the fields of the rows selected to the datatabase from the controller.

    Wish it is a little clearer.
    Thanks a lot for your time.

  • diedeerdiedeer Posts: 16Questions: 2Answers: 0
    edited November 7

    Hi Hi kthorngren,

    With your big help I managed it to work, I can retreive idLivraison to console.log when checked but what append if some rows are checked and then unchecked?

    table.on('select', function () {
      var data = table.rows( {selected: true} ).data().pluck('idLivraison').toArray();
      console.log(data);
    });
    

    Diedeer

  • kthorngrenkthorngren Posts: 21,391Questions: 26Answers: 4,961

    what append if some rows are checked and then unchecked?

    If you want to perform an action when unchecked, ie unselected, then use the deselect event.

    Maybe you will want to perform an action on the selected rows when a button is clicked instead of each time a row is selected/deselected. See this example.

    Kevin

Sign In or Register to comment.