如何在数据表中显示图像?

时间:2017-09-05 21:16:52

标签: jquery json datatables

我想在我的数据表中显示一个图像。要在数据表中显示的数据是一个像这样的数组的json数组:

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

所以在我的数据库中我只有图像的名称,我不知道如何显示图像本身。

2 个答案:

答案 0 :(得分:2)

以前曾经问过,但没有一个简单的数组数组datasrc。使用columnDefs定位图片索引,使用render构建<img>代码:

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

http://jsfiddle.net/0f9Ljfjr/965/ 另见

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

答案 1 :(得分:0)

我的经验是如何打印,然后发现如下的 stripHtml:false

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