display image from database in jquery bootgrid

Question

i want to show images from database in bootgrid table,but i really don't know where to put it,so what should i do ? how to display image from database to my bootgrid table ?.

this is my sample code

   <table id="product_data" class="table table-bordered table-striped">
 <thead>
  <tr>
   <th data-column-id="product_id" data-type="numeric">ID</th>
   <th data-column-id="product_name">Nama Produk</th>
   <th data-column-id="gambar">Gambar</th>
   <th data-column-id="category_name">Nama Kategori</th>
   <th data-column-id="product_price">Harga</th>
   <th data-column-id="commands" data-formatter="image" data-sortable="false">Gambar</th> <!-- bootgrid image table header -->
   <th data-column-id="commands" data-formatter="commands" data-sortable="false">Aksi</th>
  </tr>
 </thead>
</table>

Answer 1

You can try below jquery code:

$(function () {  
    var jqxhr = $.ajax({
         url: 'product/getProducts',
         type: 'POST'
    });
    jqxhr.done(function (data, textStatus, jqXHR) {
        $("#product_data").bootgrid({
            caseSensitive: false,
            selection: true,
            multiSelect: true,
            formatters: {                    
                "image": function (column, row) {
                    return "<img src=\"http://www.example.com/product/getimage/" + row.productId + "\" />";
                    }
                }
        }).bootgrid("append", data)
    });
});

Answer 2

You need to use formatters

Formatters are perfect to manipulate the visualization of data cells. They´re fast and easy to implement.

How to create a formatter

A formatter is nothing else than a Function that gets invoked on data cell rendering. this is mapped to the current Bootgrid instance. The formatter return a HTML String. Use the loaded.rs.jquery.bootgrid event to bind custom events to your controls rendered by a formatter.

Try this example

Html

<table id="grid-data" class="table table-condensed table-hover table-striped">
    <thead>
        <tr>
            <th data-column-id="id" data-type="numeric">ID</th>
            <th data-column-id="sender">Sender</th>
            <th data-column-id="received" data-order="desc">Received</th>
            <th data-column-id="image" data-formatter="image" data-sortable="false">Image</th>
        </tr>
    </thead>
</table>

Script

$("#grid-data").bootgrid({
    ajax: true,
    post: function ()
    {
        /* To accumulate custom parameter with the request object */
        return {
            id: "b0df282a-0d67-40e5-8558-c9e93b7befed"
        };
    },
    url: "/api/data/basic",
    formatters: {
        "image": function(column, row)
        {
            return "<image src='"+ row.imageSrc +"'>";
        }
    }
});

You need to pass image source in imageSrc property in ajax response.