Datatables add buttons on each row calling to controller function

Question

I'm trying to add an "Edit" and "Delete" buttons on each row on a Datatable. When I click on "edit", it calls a controller function and needs to pass the id of that row as argument. I'm having issues doing it right. Any suggestions?

My controller

`

def usuarioUpdate():
       return dict(formUsuarioUpdate=crud.update(db.Users,request.args(0)))`

My view

    <script>
        var tabla;
    $(document).ready(function(){
           tabla=  $('#tablaGenerica').DataTable({
                    "data":  {{=formListar}},
                    "scrollX": false,
                     "dom": 'lrtip',
                     "searching": true,
                     "sRowSelect": 'single',
                     "language": {
                     "url": "{{=URL('static','js/tradutorTable.json')}}",
                    },
                   "columns": [
                                  {
                                     "class":"details-control",
                                     "orderable":false,
                                     "data":null,
                                     "defaultContent": ""
                                  },
                                  { data: 'users.first_name' },
                                  { data: 'users.last_name' },
                                  { data: 'users.email' },
                                  { data: 'users.username' },
                                  {
                                     "orderable":false,
                                     "data":null,
                                     "defaultContent": "<div class='btn-group btn-group-justified JpositionA'><a class='btn btn-success Jview btn-xs' href='{{=URL('Herramientas','usuarioUpdate',args=["users.id"])}}'><span class='glyphicon glyphicon-pencil'></span></a><a class='btn btn-warning Jview btn-xs' href=><span class='glyphicon glyphicon-remove'></span></a></div>",
                                  },
                              ]
                });
    </script>

<table id="tablaGenerica" class="tablaC table-striped hover cell-border" cellspacing="0" width="100%" >
<thead>
    <tr>
        <th></th>
        <th>Nombre</th>
        <th>Apellido</th>
        <th>Correo Electrónico</th>
        <th>Nombre de Usuario</th>
        <th></th>
    </tr>
</thead>
</table>

Thxopen · Accepted Answer · 2019-04-16 03:33:35Z

1

as your code, I suggest you use render function to your goal

 "columns": [
                              {
                                 "class":"details-control",
                                 "orderable":false,
                                 "data":null,
                                 "defaultContent": ""
                              },
                              { data: 'users.first_name' },
                              { data: 'users.last_name' },
                              { data: 'users.email' },
                              { data: 'users.username' },
                              {
                                 "orderable":false,
                                 "data":null,
                                 "render": function(data,type,row,meta){
                                         return "<div class='btn-group btn-group-justified JpositionA'><a class='btn btn-success Jview btn-xs' href='{{=URL('Herramientas','usuarioUpdate',args=["+row.users.id+"])}}'><span class='glyphicon glyphicon-pencil'></span></a><a class='btn btn-warning Jview btn-xs' href=><span class='glyphicon glyphicon-remove'></span></a></div>"
                                 },
                              },
                          ]

about render details you can visit api https://datatables.net/reference/option/columns.render

answered Apr 16, 2019 at 3:33

Thxopen

1987 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Cristina Over a year ago

Thanks but I tried to do it with the render function the way you post it but it didn't work. I have problems passing the args part

Thxopen Over a year ago

I don't know what your language, maybe I use wrong, but you can console.log(row.users.id) first, then get id for each row do whatever you want

Collectives™ on Stack Overflow

Datatables add buttons on each row calling to controller function

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related