i am able to bind text from datatable row to edit controls. how can i bind image
reference from
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js"
type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" />
<script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-browser/0.1.0/jquery.browser.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
url: '<%= Page.ResolveUrl("~/WebService.asmx/GetFiles")%>',
method: 'post',
dataType: 'json',
success: function (data) {
$('#datatable').dataTable({
"processing": true,
"paging": true,
"searching": { "regex": true },
"responsive": true,
data: data,
columns: [
{ 'data': 'Id' },
{ 'data': 'Name' },
{
'data': 'Data',
'render': function (Data) {
if (!Data) {
return 'N/A';
}
else {
var img = 'data:image/png;base64,' + Data;
return '<img src="' + img + '" height="50px" width="50px" />';
}
}
},
{
"data": null,
"defaultContent": '<input type="button" id="btnEdit" class="btn btn-primary" value="Edit" />'
}
]
});
}, error: function (response) {
alert(response.responseText);
}
});
$('body').on('click', '[id*=btnEdit]', function () {
var data;
if ($(window).width() > 320) {
data = $(this).parents('tr').find('td');
} else {
data = $(this).parents('tr').prev().eq(0).find('td');
}
var id = data.eq(0).html();
var fname = data.eq(1).html();
var lname = data.eq(2).html();
var image = data.eq(3).html();
$('[id*=txtId]').val(id);
$('[id*=txtName]').val(fname);
$("#imageview").attr('src', 'data:image/jpeg;base64,' + image);
});
});
</script>
</head>
