Hi jovceka,
Check the below code.
HTML
<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,
"columnDefs": [
{ width: 50, targets: 0 },
{ width: 75, targets: 1 },
{ width: 100, targets: 2 },
{ width: 50, targets: 3 }
],
"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);
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div style="width: 100%; border: 1px solid black; padding: 3px">
<table id="datatable" class="table table-striped table-bordered dt-responsive nowrap"
cellspacing="0" width="100%">
<thead>
<tr>
<th>Id</th>
<th>f_Name</th>
<th>Data</th>
<th>Edit</th>
</tr>
</thead>
</table>
</div>
</form>
</body>
</html>
WebService
WebServiceCS.cs
using System;
using System.Collections.Generic;
using System.Web.Services;
using System.Configuration;
using System.Data.SqlClient;
using System.Data;
using System.Web.Script.Serialization;
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
// To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
[System.Web.Script.Services.ScriptService]
public class WebService : System.Web.Services.WebService
{
public class File
{
public int Id { get; set; }
public string Name { get; set; }
public string Data { get; set; }
}
[WebMethod]
public void GetFiles()
{
string cs = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
List<File> files = new List<File>();
using (SqlConnection con = new SqlConnection(cs))
{
SqlCommand cmd = new SqlCommand("SELECT TOP 3 id,Name,Data FROM tblFiles", con);
cmd.CommandType = CommandType.Text;
con.Open();
SqlDataReader rdr = cmd.ExecuteReader();
while (rdr.Read())
{
File file = new File();
file.Id = Convert.ToInt32(rdr["id"]);
file.Name = rdr["Name"].ToString();
file.Data = Convert.ToBase64String((byte[])rdr["Data"]);
files.Add(file);
}
}
JavaScriptSerializer js = new JavaScriptSerializer();
Context.Response.Write(js.Serialize(files));
}
}
Screenshot
