Django: Display images in DataTables, ListView

Question

I'd like to display a thumbnail image in a jQuery DataTables.

A similar post 1 shows that a js render function needs to be added to the .DataTable settings.

I'd like to implement this answer in a standard base case, using Django, class based ListView.

My attempts creates an exception:

'ImageListView' object has no attribute 'refresh_from_db'

Below is my setup

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

table element (within 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>

Above produces an exception:

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'

score 1 · Accepted Answer · answered May 02 '20 at 20:18

I figured it out and share the answer as I struggled to find it myself. Credit goes to @Mohit-Rustagi 's answer in the post here.

It turned out that using class based ListView there is no need to serialise the data separately as the addition of the "render": function(data, type, row, meta) together with columns is enough.

I did following changes to above question:

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

change in "views.py"

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