1

I want to show an image in my datatable.The data to be displayed in the datatable is a json array of arrays like this:

data : [["1", "John","image1.jpg"], ["2", "Jim", "image2.jpg"]]

So in my database I only have the name of the image and I don't know how to display the image itself.

annie
  • 177
  • 2
  • 3
  • 15
  • 1
    Hi, you can refer this https://datatables.net/forums/discussion/32924/is-it-possible-to-show-image-in-datatable and this https://jsfiddle.net/glenderson/yg1w6gen/1/ – Yeou Sep 05 '17 at 21:26

2 Answers2

6

It has been asked before, but not with a simple array of arrays datasrc. Use columnDefs to target the index of the image, use render to construct the <img> tag :

var table = $('#example').DataTable({
  data: data,
  columnDefs: [
    { targets: 2,
      render: function(data) {
        return '<img src="'+data+'">'
      }
    }   
  ]
})

http://jsfiddle.net/0f9Ljfjr/965/ See also

View pictures or images inside Jquery DataTable
Jquery datatables display image in one of the columns
Displaying image on Datatable

davidkonrad
  • 83,997
  • 17
  • 205
  • 265
1

An experience I had was how to print, then I found the stripHtml: false as below

    "buttons": [
        {
            extend: 'print',
            title: 'nono nonono',
            exportOptions: {
                columns: ':visible',
                stripHtml: false,
            },
            text: '<i class="fa fa-print"></i> Print',
            customize: function (win) {
                $(win.document.body)
                    .css('font-size', '10pt')
                    .prepend(
                        '<img src="" style="position:absolute; top:0; left:0;" />'
                    );

                $(win.document.body).find('table')
                    .addClass('compact')
                    .css('font-size', 'inherit');
            }
        },
    ]
Mauro Candido
  • 142
  • 2
  • 12