Question

我正在使用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 }
                ]
            });

        });

我已将图像存储在sql db表中。 CustImage“在sql中是varbinary。

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

如何在数据表中显示图像？

 "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})'/>';

                             }
                         }
                ]

抛出异常，当前上下文中不存在名称“full”

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

Answer 1

尝试此操作并检查您的根路径是否有。

 "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})'"/>';

                         }
                     }
            ]

Answer 2

我最终在mvc中执行此操作，无法从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;
        }

Answer 3

full变量是一个JavaScript变量，无法在C＃代码的上下文中使用。

要引用完整变量或任何其他JavaScript变量，您必须执行以下操作：

"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+"'/>';

                             }
                         }
                ]

正如您所看到的，我没有传递hte图像的内容，相反，我正在调整客户ID，并且在您的操作中，您应该接受客户的ID并加载图像

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

在您的操作中，请确保您没有加载CustImage字段以避免不必要的数据库命中。

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

Answer 4

$（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数据表显示来自sql db

4 个答案: