数据表在每行上添加按钮以调用控制器功能

时间:2019-04-16 03:22:45

标签: datatables web2py

我正在尝试在数据表的每一行上添加“编辑”和“删除”按钮。 当我单击“编辑”时,它将调用控制器函数,并且需要将该行的ID作为参数传递。 我在做正确的事情时遇到了问题。 有什么建议吗?

我的控制器

`

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

我的观点

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

1 个答案:

答案 0 :(得分:1)

作为代码,建议您使用渲染功能实现目标

 "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>"
                                 },
                              },
                          ]

关于渲染细节,您可以访问api https://datatables.net/reference/option/columns.render