View pictures or images inside Jquery DataTable

Question

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?

Answer 1

yes, simple way (Jquery Datatable)

    <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/Images/'+JsonResultRow.ImageSrcDB+'">';
                        }
                    }
                ],
                "order": [[0, "asc"]]
            });
        });
    </script>

Answer 2

[edit: note that the following code and explanation uses a previous DataTables API (1.9 and below?); it translates easily into the current API (in most cases, just ditch the Hungarian notation ("fnRowCallback" just becomes "rowCallback" for example) but I have not done so yet. The backwards compatibility is still in place I believe, but you should look for the newer conventions where possible]

Original reply follows:

---

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

Answer 3

You mean an image inside a column of the table?

Yes, just place an html image tag

like this

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

instead of putting data (some string) into a column just put the above html tag....

Answer 4

Asp.net core DataTables The following code retrieve the image from a folder in WWWroot and the path in the DB field ImagePath

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

Answer 5

In case the Name of the picturefile is put together out of one or more informations in the table, like in my case:

src="/images/' + Nummer + Belegnummer + '.jpg"

you can make it that way:

        var table = $('#Table').DataTable({
        columnDefs: [
            {
                targets: 0,
                render: getImg
            }
        ]
    });

function getImg(data, row, full) {
        var Nummer = full[1];
        var Belegnummer = full[4];
        return '<img src="/images/' + Nummer + Belegnummer + '.jpg"/>';}
    

The picture is in the first column, so Targets = 0 and gets the Information from the same row. It is necessary to add the parameters data and row. It is not necessary to outsource it into a seperate function, here getImg, but it makes it easier to debug.