How to add a button in the columns in the datatable

Asked

Viewed 3,433 times

1

I’m trying to add some buttons to the Datatable using columnDefs, but yet I can’t, and when I remove a few columns, it’s not aligned according to the order

My current code is this:

var grid = $("#grid").dataTable({
    "language": {
        "url": "/Scripts/libs/dataTable/ptBr.txt"
    },
    "ajax": "/grupo/data",
    "columnDefs": [
         {
             "data": "Id",
             "targets": 0
         },
        {
            "data": "Nome",
            "targets": 1
        },
        {
            "data": "Descricao",
            "targets": 2
        },
        {
          "render": function (data, type, row) {
              return "<a href='/editar/" + row.Id + "' class='btn btn-primary'>Editar</a>"
          },
          "targets": 3
        },
        {
            "render": function (data, type, row) {
                return "<a href='/editar/" + row.Id + "' class='btn btn-danger'>Deletar</a>"
            },
            "targets": 4
        }
    ]
});

and the following error:

Cannot read Property 'style' of Undefined

And it won’t yield even the dice

But if I remove the columns from the links, it appears the data

javascript

  • Rod, I don’t know the dataTable, but the fact that the fourth column does not have the targets cause no problem?

  • error if I remove targets

  • My observation was to include the targets: 3 in that fourth column.

  • already tried Wakim, I think I forgot to post in the example, I will edit

1 answer

1


I think the approach should be a little different. The example I found configure the column as follows:

<script type="text/javascript" charset="utf-8">
    $(document).ready(function() {
        $('#example').dataTable( {
            "sScrollX": "100%",
            "sScrollXInner": "100%",
            "bProcessing": true,
            "bServerSide": true,
            "aaSorting": [[1, "asc"]],
            "sPaginationType": "full_numbers",
            "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
            "aoColumns":[
                null,null,null,null,null,null,
               { "fnRender": function (oObj) {
                    return '<a href=/cgi/empdetails.php?showemp=' + oObj.aData[0] + '>' + 'More' + '</a>';
                  }
               }
            ],
            "sAjaxSource": "scripts/team_processing.php"
        } );
    } );
</script>

Passing the idea to your script:

var grid = $("#grid").dataTable({
    "language": {
        "url": "/Scripts/libs/dataTable/ptBr.txt"
    },
    "ajax": "/grupo/data",
    "aoColumns": [
         {
             "data": "Id",
         },
        {
            "data": "Nome",
        },
        {
            "data": "Descricao",
        },
        {
          "fnRender": function (data, type, row) {
              return "<a href='/editar/" + row.Id + "' class='btn btn-primary'>Editar</a>"
          },
        },
        {
            "fnRender": function (data, type, row) {
                return "<a href='/editar/" + row.Id + "' class='btn btn-danger'>Deletar</a>"
            }
        }
    ]
});

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.