Adding Custom Actions on column

kvn9328

Hi,

I am trying to achieve something like this using datatables jquery:

$("#pagination").dataTable({
                    "processing":true,
                    "serverSide":true,
                    "ordering":false,
                    "searching":false,
                    "ajax":{
                    "url":"pagination.html"},
                    "columns":[{"data":"name"},{"data":"alias"}]
                    });

<table id="pagination">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Alias</th>
                        <th>Options</th>
                    </tr>
                </thead>
            </table>

I will populate Name and Alias columns from the datasource of datatable, but the Options column should contain action itmes like:
view, update, delete on click events, which will perform according actions.

How could i achieve this?

I am new to front end development, any sample snipped code would help me understand.

Thanks!

kvn9328

Update,
I was able to add customized data to column and can perform action on the click:

var table = $("#pagination").dataTable({
                    "processing":true,
                    "serverSide":true,
                    "ordering":false,
                    "searching":false,
                    "ajax":{
                    "url":"pagination.html"},
                    "columns":[{"data":"Name"},{"data":"Alias"},{"data":null,"defaultContent":"<button>View</button>"}]
                    });
                    
                $('#pagination tbody').on('click','button', function()
                    {alert("Test");
                })

So, now i should be able to add custom html as a data for botton:

custom html would look like:

<sec:authorize  ifAnyGranted="SUPER_ADMIN, ENROLLMENT_ADMIN">
<a href="update.html?id=${data.name}">
    <img src="<%= request.getContextPath() %>/resources/images/edit.png" 
    style="border:0;" title="Update ${data.name}" 
    alt="Update ${data.name}" />
</a>
</sec:authorize>

kvn9328

I was able to solve the above problem by using ColumnDef.render feature.

"columnDefs":[{"targets":2, "data":"name", "render": function(data,type,full,meta)
 { return '<a href=view.html?id='+data+'><img src="<%= request.getContextPath()%>/resources/images/view.png"'+
'style="border:0;" title="View" '+ 
'alt="View" /></a> &nbsp&nbsp'+
 '<a href=view.html?id='+data+'><img src="<%= request.getContextPath() %>/resources/images/edit.png"'+
'style="border:0;" title="Edit" '
}}]