在 Jquery DataTable 中查看图片或图像 [英] View pictures or images inside Jquery DataTable

问题描述

请问是否可以将图片或图像放入DataTables(http://datatables.net/)的行中以及如何进行?

May I know if it is possible to put pictures or images into the rows of DataTables (http://datatables.net/) and how does one goes in doing it?

推荐答案

原回复如下:

丹尼尔说的是真的，但不一定说明它是如何完成的.而且有很多方法.以下是主要内容:

What Daniel says is true, but doesn't necessarily say how it's done. And there are many ways. Here are the main ones:

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

1) The data source (server or otherwise) provides a complete image tag as part of the data set. Don't forget to escape any characters that need escaping for valid JSON

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

2) The data source provides one or more fields with the information required. For example, a field called "image link" just has the Images/PictureName.png part. Then in fnRowCallback you use this data to create an image tag.

"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) 与上面类似，但不是添加整个标签，而是更新一个以图像为背景的类.您可以对具有重复元素而非一次性或独特数据的图像执行此操作.

3) Similar to above, but instead of adding a whole tag, you just update a class that has the image as a background. You would do this for images that are repeated elements rather than one-off or unique pieces of data.

这篇关于在 Jquery DataTable 中查看图片或图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！