Retreive data from rows selected to update my table

diedeer · November 5

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.

allan · November 5

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

diedeer · November 5

<?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">	url(array('controller'=>'index-livraison-magasin','action'=>'form-delete-livraison-magasin','idLivraison'=>$receptLivraison->idLivraison));?>" title="Supprimer la Livraison">	<?php echo $this->escape($receptLivraison->idLivraison);?>	<?php echo $this->escape($receptLivraison->idReceptionniste);?>

diedeer · November 5

Sorry. Forgot '''

diedeer · November 5

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>

kthorngren · 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

diedeer · November 6

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));    
})

diedeer · November 7

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'));
});

})
```

kthorngren · November 7

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

kthorngren · November 7

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

diedeer · November 7

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.

diedeer · 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

kthorngren · November 8

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

Retreive data from rows selected to update my table

Retreive data from rows selected to update my table

Answers

Howdy, Stranger!

Categories

DataTables

Retreive data from rows selected to update my table

Retreive data from rows selected to update my table

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables