glyphicon glyphicon-pencil

Ramco Ramco

5y698.NET

In below code i want View , Delete Icons. Edit -> glyphicon glyphicon-pencil is also not getting displayed.

$(document).ready(function () {

$("#tblLocation").dataTable({

ajax: {

type: "get",

url: "/Location/List",

dataType: "json",

dataSrc: ""

paging: true,

sort: true,

pageLength: 5,

searching: true,

columns: [

{ 'data': 'Id' },

{ 'data': 'Description' },

{ 'data': 'IsActive' },

{

"defaultContent": '/>'

}

]

});

Thanks

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sachin Singh5y ago
Modify table structure with 6 columns
"tblLocation">

Id
Description
IsActive
Edit
View
Delete


step 2.copy paste below code
$("#tblLocation").dataTable({
ajax: {
type: "get",
url: "/Location/List",
dataType: "json",
dataSrc: ""
},
paging: true,
sort: true,
pageLength: 5,
searching: true,
columns: [
{ 'data': 'Id' },
{ 'data': 'Description' },
{ 'data': 'IsActive' },

                   {
                    data: "Id",
                    render: function (data) {
                        return "fa fa-pencil" aria-hidden="true">";

                    }
                }  ,
{
                    data: "Id",
                    render: function (data) {
                        return "fa fa-envelope-open-o" aria-hidden="true">";

                    }
                }  ,
{
                    data: "Id",
                    render: function (data) {
                        return "fa fa-trash" aria-hidden="true">";

                    }
                }


]
});
});
Note:- return a partial view for edit, view
you can also use ajax as earlier but the point is to use anchor tag while using an anchor tag with onclick use
e.preventDefault(); to prevent the href to fire.
0
Ramco Ramco5y ago
Hi

How Delete & View will be added. Secondly i want to display only Pencil . What should be used instead of button

Thanks
0
Sachin Singh5y ago
at first, don't use bootstrap 3, use bootstrap 4, and from bootstrap 4, the glyph icons have been aboselete.
now, everywhere font-awesome is used.
step 1. give the reference of font-awesome in your view page as
"stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/5.15.3/css/fontawesome.min.css/>
now use pencil icon as
defaultContent": 'button" id="btnEdit" class="btn btn-primary btn-xs" value="Edit" fa fa-pencil" aria-hidden="true">/>'
0