DataTable serverside processing adding edit column

Question

I'm using datatable 1.10.13 serverside processing. And I want to add a column 'edit' with edit user link. How to do this?

My js file

$('#userTable').DataTable( {
    "processing": true,
    "serverSide": true,
    "ajax": {
        "type": "GET",
        "url": "",
        "dataSrc": "data",
        "contentType": "application/json; charset=utf-8",
        "dataType": "json",
        "processData": true
    },

    "columns": [
        { "data": "id" },
        { "data": "email" },
        { "data": "" }, //edit link column
    ]
} );

DataTable view php

<table cellspacing="0" id="userTable" class="display">
    <thead>
    <tr>
        <th class="ui-state-default">Name</th>
        <th class="ui-state-default">Email</th>
        <th class="ui-state-default">EDIT</th>
    </tr>
    </thead>
    <tbody></tbody>
</table>

please advise

Answer 1

you need to define the render property with the callback that how to render the column by providing the html which would be :

"columns": [
        { "data": "id" },
        { "data": "email" },
        { "data": "id",
          "searchable": false,
          "sortable": false,
          "render": function (id, type, full, meta) {
                                    return '<a href="/user/userdata/'+id+'"><i class="fa fa-pencil"></i></a>';
                                } 
        },
    ]

Answer 2

You can provide links inside column definition of data table

$('#userTable').DataTable( {
"processing": true,
"serverSide": true,
"ajax": {
    "type": "GET",
    "url": "/user/userListData",
    "dataSrc": "data",
    "contentType": "application/json; charset=utf-8",
    "dataType": "json",
    "processData": true
},

"columns": [
    { "data": "id" },
    { "data": "email" },
    { "data": "" }, //edit link column
],
columnDefs: [   {
                       "targets": 0,
                       "orderable": false
                    },

                    {
                      "targets": 1,
                      "orderable": false,

                    }
                    ,{
                      "targets": 2,
                      "orderable": false,
                       "render": function ( data, type, row ) {
                           return '<a href="#" class="yourClass">Edit</a>';

                    }
                    }
                    ],

        } );
} );