Watch Pre-recorded Live Shows Here
Why Join
Become a member
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
Answers
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
C# Corner Home
Technologies
Monthly Leaders
ASK A QUESTION
Forum guidelines
Raju Fodse
1.9k
235
22k
Adding Image using image path in datatable
Feb 11 2020 11:50 PM
I am using MVC. I want render image in server side datatable. My employee table saves files path of image and i want display that image in datatable. My Datatable working but unable to display image I am getting following error
GET
http://192.168.1.110/easyappnew/RTEntry/~/Images/EmpPic/RupeshKumarSingh200353474.PNG
[HTTP/1.1
404
Not Found 88ms]
GET
http://192.168.1.110/easyappnew/RTEntry/~/Images/EmpPic/Jaishankar200023897.PNG
[HTTP/1.1
404
Not Found 66ms]
GET
http://192.168.1.110/easyappnew/RTEntry/~/Images/EmpPic/RupeshKumarSingh200353474.PNG
[HTTP/1.1
404
Not Found 3ms]
GET
http://192.168.1.110/easyappnew/RTEntry/~/Images/EmpPic/Jaishankar200023897.PNG
[HTTP/1.1
404
Not Found 1ms]
Following is my View Code
<
title
>
WTC List
</
title
>
<
div
class
=
"EasyViewHeader"
>
WTC List
</
div
>
<
div
class
=
"EasyViewDiv"
>
<
div
class
=
"form-group"
>
<
button
title
=
"Add WTC"
data-toggle
=
"tooltip"
class
=
"button button3"
onclick
="location.href='@Url.Action("CreateWTC", "WTC
")';return false;"
>
<
span
class
=
"fa fa-plus"
/>
</
button
>
</
div
>
<
div
class
=
"table-responsive"
>
<
table
style
=
"width:100%"
id
=
"mytable"
class
=
"table table-bordered"
>
<
thead
>
<
tr
>
<
th
>
Update Date
</
th
>
<
th
>
PIPE NO
</
th
>
<
th
>
Order ID
</
th
>
<
th
>
PhotoID
</
th
>
<
th
>
EmpID
</
th
>
<
th
>
Status
</
th
>
<
th
>
Coupon
</
th
>
<
th
>
Shots
</
th
>
<
th
>
Segments
</
th
>
<
th
>
Action
</
th
>
</
tr
>
</
thead
>
</
table
>
</
div
>
</
div
>
<
link
href
=
"~/DatatableBS/datatables.min.css"
rel
=
"stylesheet"
/>
<
script
src
=
"~/DatatableBS/datatables.min.js"
>
</
script
>
<
link
href
=
"~/Content/TablesStyle.css"
rel
=
"stylesheet"
/>
<
script
src
=
"~/DatatableBS/datetime-moment.js"
>
</
script
>
<
script
src
=
"~/DatatableBS/moment.min.js"
>
</
script
>
<
script
>
$(document).ready(function () {
$('#mytable').dataTable({
"processing": true, // for show progress bar
"serverSide": true, // for process server side
"filter": true, // this is for disable filter (search box)
"order": [[0, "desc"]],
"orderMulti": false, // for disable multiple column at once
"language": {
processing: "Please Wait........"
},
"ajax": {
"url": "@Url.Action("LoadData", "RTEntry")",
//"url":"Easyapplocal/RTEntry/LoadRTList",
"type": "POST",
"datatype":"json"
},
"columns": [
{
"data": "UpdateDate", "name": "UpdateDate", "autowidth": true,
"render": function (value) {
if (
value
=== null) return "";
return moment(value).format('DD/MM/YYYY');
}
},
{ "data": "PIPENO", "name": "PIPENO", "autowidth": true },
{ "data": "OrderID", "name": "OrderID", "autowidth": true },
{
"data": "PhotoID",
"render": function (url, type, full) {
return '
<
img
src
=
"'+ url + '"
class
=
"img-circle"
/>
';
}
},
{ "data": "EmpID", "name": "EmpID", "autowidth": true },
{ "data": "Status", "name": "Status", "autowidth": true },
{ "data": "ISCoupon", "name": "ISCoupon", "autowidth": true },
{ "data": "TotalShots", "name": "TotalShots", "autowidth": true },
{
"data": "Flex1", "name": "Flex1", "searchable": false,
"sortable": false, "autowidth": true
},
{
"data": "Action", "name": "Action", "searchable": false,
"sortable": false,
"render": function (data, type, full, meta)
{
return '
<
a
class
=
"EasyUIBtn EasyUIBtnDtl"
href
="@Url.Action("DetailsWTC", "WTC
")' + "
/" + full.WTCID + ' "
target
=
"_self"
>
<
span
class
=
"fa fa-id-card-o"
>
</
span
>
</
a
>
';
}
}
]
});
});
</
script
>
How can I display image in datatable
Reply
Answers (
5
)
How to get a date to show in Edit View
How to take data from another database,when using code first