Datatables 查看Jquery数据表中的图片或图像

我可以知道是否可以将图片或图像放入数据表的行中吗(http://datatables.net/)一个人是如何做到这一点的呢？

你是指表格列中的图像吗

是的，只需放置一个html图像标记

像这样

<img src="Images/PictureName.png">

---

与其将数据（一些字符串）放入列中，不如将上面的html标记放入列中……

[编辑：注意，下面的代码和解释使用了以前的DataTables API（1.9及以下版本？）；它可以轻松地转换为当前API（在大多数情况下，只需放弃匈牙利符号（“fnRowCallback”只是变成了“rowCallback”）但我还没有这样做。我相信向后兼容性仍然存在，但您应该尽可能寻找更新的约定]

答复如下:

---

丹尼尔所说的是真的，但不一定说明是怎么做到的。有很多方法。以下是主要方法：

1） 数据源（服务器或其他）提供完整的图像标记作为数据集的一部分。不要忘记转义任何需要转义的字符以获得有效的JSON

2） 数据源提供一个或多个包含所需信息的字段。例如，一个名为“image link”的字段只有

Images/PictureName.png

部分。然后，在fnRowCallback中，使用此数据创建图像标记

"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;
}

“fnRowCallback”：函数（nRow、aData、iDisplayIndex、iDisplayIndexFull）{
var imgLink=aData['imageLink']；//如果您的JSON是3D的
//var imgLink=aData[4]；//其中4是2D的零原点列
var imgTag=“”；
$（'td:eq（4）”，nRow.html（imgTag）；//其中4是html中的零原点可见列
返回nRow；
}

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

是的，简单方法（Jquery Datatable）

$（文档）.ready（函数（）{
$（'#示例'）。数据表({
“处理”：true，//控制处理指示符。
“serverSide”：true，//出于性能原因，建议在数据超过10000行时使用serverSide
“info”：true，//控制表信息显示字段
“stateSave”：true，//在重新加载页面时还原表状态，
“lengthMenu:[[10,20,50，-1]，[10,20,50，“All”]，//使用第一个内部数组作为页面长度值，使用第二个内部数组作为显示选项
“ajax”：{
“url”：“@string.Format（“{0}://{1}{2}”、Request.url.Scheme、Request.url.Authority、url.Content（“~”））/Home/AjaxGetJsonData”，
“类型”：“获取”
},
“栏目”：[
{“data”：“Name”，“orderable”：true}，
{“data”：“Age”，“orderable”：false}，
{“data”：“DoB”，“orderable”：true}，
{
“呈现”：函数（数据、类型、JsonResultRow、元）{
返回“”；
}
}
],
“订单”：[[0，“asc”]]
});
});

---

Asp.net核心数据表 以下代码从

WWWroot

中的文件夹中检索图像，并在DB字段中检索路径

ImagePath

{
   "data": "ImagePath",
   "render": function (data) {
       return '<img src="' + data + '" class="avatar" width="50" height="50"/>';
       }
 }

{
“数据”：“图像路径”，
“渲染”：函数（数据）{
返回“”；
}
}

我需要做类似的事情，我需要从jquery ui添加图像，然后当我将鼠标悬停在图像上时，我需要显示包含数据的工具提示。有什么建议吗？几乎和上面一样。大多数浏览器都会使用title属性作为工具提示，所以“最简单的方法”是将数据推送到单元格或图像的title属性中。在我还在学习jQuery和datatables时，你能给我举个例子吗。我真的很感激，我可以；您有返回的JSON示例吗？也许最好开始一个新的SO问题？不确定类似但细节不同的问题的协议是什么。我在这里开始了一个新问题，嗯，我想我浪费了DN 30分钟，因为我在img中使用了href，而不是src。。。。ups我的图像位于Content文件夹内，因此，Content/，要测试，如果您在浏览器中粘贴url，您可以看到图像。那么路径是正确的。您也可以像我一样使用相对路径。该示例使用数据库作为图像地址，路径在“ImageAddress”中，我在数据库中只保存了扩展名为的图像名称，文件夹位置是硬编码的，“ImageAddress”具有部分路径。谢谢。。现在明白了。我搜索如何首先将图像添加到文件夹中，然后检索它。是的，非常简单{“render”：函数（数据、类型、JsonResultRow、元）{return'+JsonResultRow.CountryName+'['+JsonResultRow.CountryKey+']'；}，在我的例子中，$（'#img'）.attr（“src”，baseUrl+imgUploadPath+data.image）；代码在中输出一个图像。如何在DataTable中实现这一点？plz…将HTML数据表图像作为表元素

{
   "data": "ImagePath",
   "render": function (data) {
       return '<img src="' + data + '" class="avatar" width="50" height="50"/>';
       }
 }