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

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

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

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

EN

回答 5

Stack Overflow用户

回答已采纳

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

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

原文如下:

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

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

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

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
"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 02:43:58

是,简单的方式(Jquery Datatable)

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
    <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 11:12:31

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

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

像这样

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

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

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

https://stackoverflow.com/questions/8206419

复制
相关文章
php输出字节流(本节以音频播放为例)
本教程是在ThinkPHP5.0中进行的,如用在其它程序中,作少量修改即可。     /**      * 以文件流输出音频文件      * @author Sindsun      * @date 2018年10月27日22:32:17      * @param $filePath 文件地址      * @param $param 其它参数      * @param $fun 执行一个闭包函数  第一个参数为外部参数      * @output filestream      * @return
Sindsun
2019/12/06
1.7K0
[简约webAPI]分别以asp|jsp|php简单粗暴实现webAPI,输出json数据
[简约webAPI]分别以asp|jsp|php简单粗暴实现webAPI,输出json数据
landv
2020/02/11
2.1K0
fastjson输出空值
在fastjson中,缺省是不输出空值的。无论Map中的null和对象属性中的null,序列化的时候都会被忽略不输出,这样会减少产生文本的大小。但如果需要输出空值怎么做呢?
johnhuster的分享
2022/03/28
1.5K0
PHP 输出控制
默认情况下,输出一个字符串到浏览器,经过3个阶段PHP buffer->Tcp buffer->浏览器(IE浏览器有的版本也存在buffer)
用户3094376
2018/09/12
2.6K0
TCP/IP速记
OSI是一种设计得非常详细的协议,而问题就是出在详细上;因为实际的情况往往比想象中的更加多变和灵活,所以OSI的详细本该成为它的优势,但却成为了其限制。
Noneplus
2020/08/13
3170
TCP/IP速记
PHP输出语句
prinf_r()是PHP的内置函数可以输出任意的数据(变量,数组,字符串),也是只能输出一个数据
十月梦想
2018/08/29
6.5K0
以目标为导向做输出
前面几篇文章介绍了如何以一个问题开始,思考全局理想态,以及如何结构化成体系,如何基于目标拆解路径。
春哥大魔王
2023/03/22
2490
以目标为导向做输出
vim命令速记
复制时不要行号 如果用鼠标复制,会连行号一块选上. 在一般模式下按v进入visiual模式,选择要复制的行,然后输入 +y 就可以了.
yifei_
2022/11/14
5510
scripts中以.py结尾,输出一个张量的元素值的代码分享
MAIN_MENU_BUTTON_BACKGROUND = pygame.image.load("assets/main_menu_button_bg.png")
好派笔记
2022/06/07
8290
vue知识速记
MVVM 是 Model-View-ViewModel 的缩写。 Model代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑。 View 代表UI 组件,它负责将数据模型转化成UI 展现出来。 ViewModel 监听模型数据的改变和控制视图行为、处理用户交互,简单理解就是一个同步View 和 Model的对象,连接Model和View。
用户3055976
2020/09/02
6010
git命令速记
git是一个很神奇的工具,是由Linux的发起者linus用c语言编写的… 最常用的其实只有十几个命令,其他的可以等到真正的团队合作的时候去复习一下。 在这里记录一下常用命令,想要学习git推荐廖雪峰的Git教程
yifei_
2022/11/14
4350
git命令速记
python 以16进制打印输出
打印整数16进制 num=10 print('%#x'%num) 打印字符串中的16进制 arr='12342535' for i in arr:   print('%#x'%ord(i))
py3study
2020/01/09
3.2K0
PHP学习-PHP输出图片下载
输出下载 <?php $t=imagecreatetruecolor(100,100); $red=imagecolorallocate($t,255,0,0); imagef
AlexTao
2019/12/12
3.2K0
php输出命令_php怎么调用函数
以上方法是命令执行完才可执行后面程序,如果你的逻辑复杂,会影响用户体验,这时可以提供一个,异步执行的方法,通知服务器执行,不占用主程序进程的方法
全栈程序员站长
2022/11/11
14.9K0
PHP中遍历二维数组_以不同形式的输出操作实例
【当下浏览的服务器和开发工具是哪些】/ 如下所示: <body> <?php //定义二维索引数组 $arr = array( array("101","李军","男","1976-02-20","9
用户2323866
2021/07/01
9940
python输出多个变量的值。
有点类似于C语言 print("%s,%d,%d"%(name ,age ,school))
py3study
2020/01/10
5K0
php fastcgi,配置apache以fastcgi运行php[通俗易懂]
apache默认是用自带的mod_php模块运行php,现在我们介绍使用fastcgi来执行php脚本。先说下fastcgi的优点:
全栈程序员站长
2022/09/14
2.4K0
php fastcgi,配置apache以fastcgi运行php[通俗易懂]
PHP对象传值 - 引用传值
运行结果,其实第一次打印就可以看出来a 和 b 是一个对象,因为对象标识符一样(都是 1)
很酷的站长
2023/02/17
6K0
PHP对象传值 - 引用传值
点击加载更多

相似问题

PHP速记布尔值

110

php速记if

31

PHP速记概述

94

如何配置SASS以输出速记十六进制颜色

10

PHP速记语法

21
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文