Send another column as parameter for a button on each row

Pandalex

Hi everyone,

I want a button on each row, so I looked at the docs and found how to add it.
The thing I don't get is how I can specify the data I want to send.

Here is the definition of my columns with my 2 buttons.
I want the column 'nom' to be the parameter

$(document).ready(function() {  
        $.fn.dataTable.moment('DD/MM/YYYY');        
    
    
         
         // Configuration du datatable
        var table = $('#tableau').DataTable({   
                         ajax: {
                    dataType: 'json',
                    type: 'GET',
                    url: '/AppliHabit/ChargeHabits/',
                    dataSrc : ''
                },
            columns: [
                {
                    "className":      'details-control',
                    "orderable":      false,
                    "searchable":     false,
                    "data":           null,
                    "defaultContent": ''
                },
                {"data": 'nom', "title": 'Nom'},
                {"data": 'taille', "title": 'Taille'},
                {"data": 'couleur', "title": 'Couleur'},
                {"data": 'teinte', "title": 'Teinte', "visible":false},
                {"data": 'ton', "title": 'Ton', "visible":false},
                { 
                   'mRender': function (data, type, full) {
                        return '<input type="button" name="edit" value="Modifier" onclick="editRecord(' + full[2] + ');" class="buttonGreen">';                             
                    },
                    "orderable":      false,
                    "searchable":     false
                },
                { 
                   'mRender': function (data, type, full) {
                        return '<input type="button" name="delete" value="Supprimer" onclick="deleteRecord(' + full[2] + ');" class="buttonRed">';                          
                    },
                    "orderable":      false,
                    "searchable":     false
                }
            ],          

Then I have my functions to send this modification to my servlet :

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

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

My issue is that 'nom' is always undefined

How can I fix this ?

Thanks a lot,

Pandalex

OK so I took some time but I found what was wrong.

This is the correct syntax

                {"data": 'nom', "title": 'Nom'},
                {"data": 'taille', "title": 'Taille'},
                {"data": 'couleur', "title": 'Couleur'},
                {"data": 'teinte', "title": 'Teinte', "visible":false},
                {"data": 'ton', "title": 'Ton', "visible":false},
                { 
                   'mRender': function (data, type, full) {                    
                        return  '<input type="button" name="edit" value="Modifier" onclick="editRecord(\'' + full.nom + '\');" class="buttonGreen">';;                          
                    },

And it had nothing to do with the data coming from an Ajax source.

I hope that it will be useful for another stranded developer !

(I can't vote for my answer )

colin

I just voted for you