首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >查看Jquery DataTable中的图片或图像

查看Jquery DataTable中的图片或图像
EN

Stack Overflow用户
提问于 2011-11-21 09:43:48
回答 5查看 56.4K关注 0票数 16

我想知道是否可以将图片或图像放入DataTables (http://datatables.net/)的行中,以及如何做到这一点?

EN

回答 5

Stack Overflow用户

回答已采纳

发布于 2011-11-21 23:33:17

编辑:请注意,下面的代码和解释使用了以前的API (1.9及更低版本?);它很容易转换为当前的DataTables (在大多数情况下,只需去掉匈牙利符号(例如,“fnRowCallback”就变成了"rowCallback“),但我还没有这样做。我相信向后兼容性仍然存在,但您应该在可能的情况下寻找更新的约定。

原文如下:

Daniel说的是真的,但不一定说它是怎么做的。而且有很多方法。以下是主要的几点:

1)数据源(服务器或其他)提供完整的图像标签作为数据集的一部分。不要忘记对任何需要转义的字符进行转义,才能获得有效的JSON

2)数据源为一个或多个字段提供所需信息。例如,名为“图像链接”的字段只包含Images/PictureName.png部分。然后在fnRowCallback中使用这些数据来创建一个图像标记。

代码语言:javascript
代码运行次数:0
运行
复制
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
  var imgLink = aData['imageLink']; // if your JSON is 3D
  // var imgLink = aData[4]; // where 4 is the zero-origin column for 2D

  var imgTag = '<img src="' + imgLink + '"/>';
  $('td:eq(4)', nRow).html(imgTag); // where 4 is the zero-origin visible column in the HTML

  return nRow;
}

3)与上面类似,但您只需更新一个以图像为背景的类,而不是添加整个标记。您可以对重复元素的图像执行此操作,而不是一次性或唯一的数据片段。

票数 16
EN

Stack Overflow用户

发布于 2016-05-15 10:43:58

是,简单的方式(Jquery Datatable)

代码语言:javascript
代码运行次数:0
运行
复制
    <script>
        $(document).ready(function () {
            $('#example').dataTable({
                "processing": true, // control the processing indicator.
                "serverSide": true, // recommended to use serverSide when data is more than 10000 rows for performance reasons
                "info": true,   // control table information display field
                "stateSave": true,  //restore table state on page reload,
                "lengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]],    // use the first inner array as the page length values and the second inner array as the displayed options
                "ajax":{
                    "url": "@string.Format("{0}://{1}{2}", Request.Url.Scheme, Request.Url.Authority, Url.Content("~"))/Home/AjaxGetJsonData",
                    "type": "GET"
                },
                "columns": [
                    { "data": "Name", "orderable" : true },
                    { "data": "Age", "orderable": false },
                    { "data": "DoB", "orderable": true },
                    {
                        "render": function (data, type, JsonResultRow, meta) {
                            return '<img src="Content/'+JsonResultRow.ImageAddress+'">';
                        }
                    }
                ],
                "order": [[0, "asc"]]
            });
        });
    </script>

票数 15
EN

Stack Overflow用户

发布于 2011-11-21 19:12:31

您的意思是表的列中的图像?

可以,只需放置一个html图像标签即可

像这样

代码语言:javascript
代码运行次数:0
运行
复制
<img src="Images/PictureName.png">

而不是将数据(一些字符串)放入列中,只需放入上面的html标记即可。

票数 7
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/8206419

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档