how to add edit and delete button when displaying a table using ajax

Question

Hi team i have a datatable and i am loading the datatable using ajax query

My query is as follows

<script type="text/javascript">

        function fetchIndex() {
            $(document).ready(function () {
                $('#example thead tr').clone(true).addClass('filters').appendTo('#example thead');
                $.ajax({
                    type: "POST",
                    dataType: "JSON",
                    rl: "/HRDashboard/Indexresult",
                    success: function (response) {
                        var table = $('#example').dataTable({
                            data: response,
                            
                            columns: [
                                { 'data': 'employeeId' },
                                { 'data': 'employeeName' },
                                { 'data': 'employeeAadharCardNumber' },
                                { 'data': 'employeePanCardNumber' },
                                { 'data': 'employeeManager' },
                                { 'data': 'employeePersonalNumber' },
                                { 'data': 'employeeEmail' },
                                { 'data': 'employeeDesignation' },
                                { 'data': 'employeeTeam' },
                                { 'data': 'employeeManager' },
                                { 'data': 'employeeAddress1' },
                                { 'data': 'mail1Status' },
                                { 'data': 'mail1SentDatetime' },
                                { 'data': 'mail2Status' },
                                { 'data': 'mail2Datetime' },
                                { 'data': 'mail3Status' },
                                { 'data': 'mail3SentDatetime' },
                                { 'data': 'mail4Status' },
                                { 'data': 'mail4SentDatetime' },
                                {
                                    mRender: function (data, type, row) {
                                        return '<a  class="bi bi-pen" ref="/HRDashboard/Edit/"' +data +' > <span class="glyphicon-1 glyphicon-pencil" > </span></a > | ';
                                    }
                                },
                            ],
                            autofill: true,
                            select: true,
                            responsive: true,
                            destroy: true,
                            orderCellsTop: true,
                            fixedHeader: true,
                            scrollY: true,
                            scrollX: true,
                            initComplete: function () {
                                var api = this.api();
                                // For each column
                                api.columns().eq(0).each(function (colIdx) {
                                    // Set the header cell to contain the input element
                                    var cell = $('.filters th').eq($(api.column(colIdx).header()).index());
                                    var title = $(cell).text();
                                    $(cell).html('<input type="text" placeholder="' + "" + '" />');
                                    // On every keypress in this input
                                    $('input', $('.filters th').eq($(api.column(colIdx).header()).index()))
                                        .off('keyup change')
                                        .on('keyup change', function (e) {
                                            e.stopPropagation();
                                            // Get the search value
                                            $(this).attr('title', $(this).val());
                                            var regexr = '({search})'; //$(this).parents('th').find('select').val();
                                            var cursorPosition = this.selectionStart;
                                            // Search the column for that value
                                            api
                                                .column(colIdx)
                                                .search((this.value != "") ? regexr.replace('{search}', '(((' + this.value + ')))') : "", this.value != "", this.value == "")
                                                .draw();
                                            $(this).focus()[0].setSelectionRange(cursorPosition, cursorPosition);
                                        });
                                });
                            }

                        })
                        table.columns.adjust().draw();
                    },
                    error: function (error) {
                        console.log(response);
                    }

                });
            });
        }

    </script>

i am able to add the snipped to show the edit button but on click i am not able to pass the employeeid of the row clicked . 

 

I am not sure where i went wrong..

 

Also i need to show the following 3 action items in a same <td> tab

                        <td class="text-nowrap">
                            <a asp-action="Edit" class="bi bi-pen" asp-route-id="@item.EmployeeId"><span class="glyphicon-1 glyphicon-pencil"></span></a> |
                            <a asp-action="Details" asp-route-id="@item.EmployeeId"><span class="glyphicon-1 glyphicon-eye-open"></span></a> |
                            <a asp-action="Delete" asp-route-id="@item.EmployeeId"><span class="glyphicon-1 glyphicon-remove"></span></a>
                        </td>

How to achieve it