CODEWITHSUNDEEP
jqueryjsondatatables
annie
annie

Reputation: 177

How to display image in datatable?

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.

Upvotes: 1

Views: 29490

Answers (2)

Mauro Candido
Mauro Candido

Reputation: 161

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');
            }
        },
    ]

Upvotes: 1

davidkonrad
davidkonrad

Reputation: 85558

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

Upvotes: 6

Related Questions