CODEWITHSUNDEEP
jqueryangular
Krishnan
Krishnan

Reputation: 1050

How to add edit hyperlink in Jquery Datatable using angular 4

In our angular project we are using Jquery Datatable.Grid is displaying properly.Now I want to add a edit hyperlink at the end of each row. Anyone please help me to add an edit hyperlink at the end. Please see my code for reference

this.http.get(this.appService.baseUrl + 'api/ServiceType').subscribe(result =>

{

        this.serviceTypes = result.json() as ITypeSummary[];

        $(".log-data-table").DataTable({

            "data": this.serviceTypes,

            scrollY: "500px",

            destroy: true,

            scrollX: true,

            scrollCollapse: true,

            autoWidth: true,

            paging: true, 

            "columns": [

                { data: "TypeId" },

                { data: "name"},

                { data: "status" }

            ]
        });
    }, error => console.error(error));

After the status I want to add an "edit" hyperlink. Anyone please help to fix this

Upvotes: 1

Views: 52

Answers (1)

Mannan Bahelim
Mannan Bahelim

Reputation: 1365

"columns": [

                { data: "serviceTypeId" },

                { data: "name"},

                { data: "status" },
                data: null, orderable: true, "name": "ColumnName", render: function (data, type, row) {
                return ''<a class="btn btn-primary btn-flat btn-sm" data-toggle="tooltip" title="Edit" href="' + link + '"><i class="fa fa-edit"></i> </a>';
                       }

            ]

You can access the property by using

data.propertyName

enter image description here

Upvotes: 1

Related Questions