Django：在 DataTables、ListView 中显示图像

Posted 2023-05-07

【中文标题】Django：在 DataTables、ListView 中显示图像

【英文标题】：Django: Display images in DataTables, ListView

【发布时间】：2020-08-16 04:42:45

【问题描述】：

我想在 jQuery DataTables 中显示缩略图。

类似的帖子1 表明需要将js 渲染函数添加到.DataTable 设置中。

我想在标准的基本案例中实现这个答案，使用 Django，基于类的 ListView。

我的尝试创建了一个异常：

“ImageListView”对象没有属性“refresh_from_db”

下面是我的设置

table_settings.js

    $('#imagetable').DataTable(
    "data": "img_url",   
    'render': function (data, type, full, meta) 
      return '<img src="'+data+'" style="height:100px;width:100px;"/>';
    );

models.py

class ProductImage(models.Model):
    product_image_name = models.CharField(max_length=20)
    product_image_description = models.TextField(max_length=255, null=True)
    product_image = models.ImageField(default='product_image/default.jpg', upload_to='product_image')

views.py

class ImageListView(LoginRequiredMixin, ListView):
    model = ProductImage
    template_name = 'product/image_list.html'
    image_url = ProductImage.product_image

    def get_context_data(self, **kwargs):
        data = super().get_context_data(**kwargs)
        data['img_url'] = self.image_url
        return data

表格元素（在 image_list.html 中）

    <table id="imagetable">
        <thead>
        <tr>
            <th>Name</th>
            <th>Description</th>
            <th>Image</th>
        </tr>
        </thead>
        <tbody>
        % for object in object_list %
        <tr>
            <td>  object.product_image_name  </td>
            <td>  object.product_image_description  </td>
            <td>  object.product_image  </td>
        </tr>
        % endfor %
        </tbody>
    </table>

以上产生异常：

AttributeError at /image/list/

'ImageListView' object has no attribute 'refresh_from_db'

Request Method:     GET
Request URL:    //localhost/image/list/
Django Version:     2.1.7
Exception Type:     AttributeError
Exception Value:    

'ImageListView' object has no attribute 'refresh_from_db'

【参考方案1】：

当我自己努力寻找答案时，我想出了答案并分享了答案。归功于@Mohit-Rustagi 在帖子here 中的回答。

事实证明，使用基于类的 ListView 不需要单独序列化数据，因为添加 "render": function(data, type, row, meta) 和 columns 就足够了。

我对上述问题做了以下更改：

“table_settings.js”的变化

$('#imagetable').DataTable(
    "columns": [
     "data": "product_image_name" ,
     "data": "product_image_description" ,
     "data": "product_image",
    "render": function(data, type, row, meta) 
                 return '<img src="/media/'+data+'" style="height:100px;"/>';
],
);

“views.py”的变化

class ImageListView(ListView):
    model = ProductImage
    template_name = 'product/image_list.html'