查看Jquery DataTable中的图片或图像

12

[编辑：请注意，下面的代码和解释使用了以前的DataTables API（1.9及以下版本）;它很容易转换成当前的API（在大多数情况下，只是抛弃匈牙利符号（“fnRowCallback”就是例如“rowCallback”），但我还没有这样做，我相信后向兼容性仍然存在，但你应该查找新公约在可能情况下]

原答复如下：

丹尼尔说什么是真实的，但并不一定说这是怎么做的还有很多方法在这里是主要的。：

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

2）数据源提供一个或多个字段，并提供所需的信息。例如，名为“图像链接”的字段只有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; 
}

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

来源

2011-11-21 15:33:16

+0

标记为正确答案，因为它更全面。 –

+0

我需要做类似的事情，我需要从jquery-ui添加图像，然后当我将鼠标悬停在它上面时，我需要显示数据的工具提示。对此有何建议？ – user525146

+0

几乎和上面一样。大多数浏览器将使用title属性作为工具提示，所以“最低挂果”是将数据推送到单元格或图像的标题属性中。 –

7

你的意思是表格中一列的图像？

是，只需将一个HTML图像标记

这样

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

而不是把数据（一些字符串）成列只是把上面的html标记....

来源

2011-11-21 11:12:30 Daniel

+0

+1感谢丹尼尔，从来没有想到它是如此简单。 –

+0

嗯，我想我浪费了30分钟，因为我在IMG里面使用了href而不是src .... ups – Stefan

7

是的，简单的方法（jQuery的数据表）

<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>