How to add a button in the columns in the datatable

Question

How to add a button in the columns in the datatable

Navigation

#1 by (1 votes)

1

I'm trying to add some buttons in the DataTable using columnDefs , but I can not, and when I remove some columns, it does not align in 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 gives the following error:

Can not read property 'style' of undefined

And it does not even render data

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

javascript jquery-datatables

asked by anonymous 21.08.2014 / 17:24

1 answer

URLloader error - flex Format cell in DataGrid at runtime C #

score 1 · Accepted Answer

I think the approach should be a bit different. The example I found sets 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>"
            }
        }
    ]
});