Jquery datatable show image from sql db

Question

I am using jquery datatable v 1.10.12

 $(function () {

            $('.datatable-basic').DataTable({
                "ajax": {
                    "url": "/Master/loadData",
                    "type": "GET",
                    "datatype": "json"
                },
                "columns": [
                        { data: "Id", "autoWidth": true },
                        { data: "Name", "autoWidth": true },
                { data: "CustImage", "autoWidth": true }
                ]
            });

        });

I have stored image in sql db table. CustImage" is varbinary in sql.

db.Customers.OrderBy(a => a.Name).ToList();

How to display image in datatable?

 "columns": [
                            { data: "Id", "autoWidth": true },
                            { data: "Name", "autoWidth": true },
                        {
                            "render": function (data, type, full, meta) {
                                return '<img id="image" src='@Url.Action("imageGenerate", "Master", new { imgData = full.CustImage})'/>';

                             }
                         }
                ]

Throws exception, The name 'full' does not exist in the current context

 public FileContentResult imageGenerate(byte[] imgData)
        {
            if (imgData != null)
            {
                return new FileContentResult(imgData, "image/jpg");
            }
            return null;
        }

http://www.w3schools.com/jsref/dom_obj_image.asp and http://stackoverflow.com/questions/10982712/convert-binary-data-to-base64-with-javascript — madalinivascu, Dec 14 '16 at 06:24
you realize that your are doing ajax don't you, you are trying to execute asp in the browser which is not possible — madalinivascu, Dec 14 '16 at 08:38
@madalinivascu yes but I should be able to call server side function from UR.ACtion and get image. This works in mvc, it's just I am having issue from datatable — Johny Bravo, Dec 14 '16 at 08:57
you are using ajax which is asynchronous so the asp doesn't execute — madalinivascu, Dec 14 '16 at 09:00

score 0 · Answer 1 · answered Dec 14 '16 at 07:36

Try this and check your root path if have.

 "columns": [
                            { data: "Id", "autoWidth": true },
                            { data: "Name", "autoWidth": true },
                        {
                            "render": function (data, type, full, meta) {
                                return '<img id="image" src="'@Url.Action("imageGenerate", "Master", new { imgData = full.CustImage})'"/>';

                         }
                     }
            ]

still the error is same. " The name 'full' does not exist in the current context " — Johny Bravo, Dec 14 '16 at 08:57

score 0 · Answer 2 · answered Dec 14 '16 at 12:16

I ended up doing this in mvc, not able to find doing this from datatable.

  <img src='@Url.Action( "Generate", "Master", new { id =  dr.ID } )' style="width:auto;height:80px;" />




 public FileContentResult imageGenerate(int id)
        {
            if (id != null)
            {
                var imageData = db.GetImageFromDB(id);
                return new FileContentResult(imageData, "image/jpg");
            }
            return null;
        }

score 0 · Answer 3 · answered Dec 15 '16 at 05:55

The full variable is a JavaScript variable and can't be used in the context of a C# code.

To refer to the full variable or any other JavaScript variable, you have to do this:

"columns": [
                            { data: "Id", "autoWidth": true },
                            { data: "Name", "autoWidth": true },
                            {
                               "render": function (data, type, full, meta) {
                                var url = @Url.Action("imageGenerate", "Master", new { id = "_X_"});
                                url = url.replace("_X_",full.CustImage);
                                return '<img id="image" src="'+url+"'/>';

                             }
                         }
                ]

As you can see, I am not passing the content of hte image, instead , I am pasing the customer Id, and in your action, you should accept the Id of the customer and load the image

public FileContentResult imageGenerate(int id)
        {
            var customer = db.Customers.Find(id)
            if (customer != null)
            {
                return new FileContentResult(customer.CustImage, "image/jpg");
            }
            return null;
        }

In your action, make sure you don't load the CustImage field to avoid unnecessary database hits.

db.Customers.OrderBy(a => a.Name).Select(a=>new {Id,Name}).ToList();

score 0 · Answer 4 · answered Jul 03 '18 at 20:22

$(document).ready(function () {

        dataTable = $("#breakfatid").DataTable({
            "ajax": {
                "url": "/AdminPanel/getdata",
                "type": "GET",
                "DataType": "JSON"
            },
            "columns": [

                { "data": "Food_Name" },
                { "data": "Food_Price" },
                { "data": "Food_Images", "render": function (data) {

                    return '<img src="/BreakFast_Images/' + data + '" style="height:100px;width:100px;"/>';

                    }

                },

                { "data": "Breakfast_ID", "render" : function(data){

                    return "<a class='btn btn-danger' onclick=Delete(" + data + ") style='margin-left:12px'><i class='fa fa-trash'></i> Delete</a><a class='btn btn-warning' style='margin-left:12px' onclick=view('@Url.Action("AddOrEdit", "AdminPanel")/" + data + "')><i class='glyphicon glyphicon-eye-open'></i> View</a>";

                },

                "orderable": false,
                "width" : "200px"

                },

            ],
            "language": {
                "processing": "<img src='/images/loder1.gif'>",
                "emptyTable" : "No data found, Please click on <b>Add New</b> button"
            },
            processing: true

        });

    });

Jquery datatable show image from sql db

4 Answers4