jquery datatable column for images

Question

I'm using php to generate the array and JSON encode it echoing it back to the javascript to render.

JS isn't my forte by a long shot and I've found a couple of examples but they don't make sense to me.

Sure the penny will drop with some direction and I'm sure its an easy one when I see it.

$(document).ready(function() {
            var dataTable = $('#result-grid').DataTable( {
                "processing": true,
                "serverSide": true,
                "ajax":{
                    url :"searchdata.php", // json datasource
                    type: "post",  // method  , by default get
                    error: function(){  // error handling
                        $(".result-grid-error").html("");
                        $("#result-grid").append('<tbody class="result-grid-error"><tr><th colspan="3">No data found in the server</th></tr></tbody>');
                        $("#result-grid_processing").css("display","none");

                    }
                }
            } );

The array comes in from with the first column as a url to the image for the colour the remaining columns are versions of that colour.

So how do I make it so that the first column it renders the url as the image given from the array.

    Array
(
[0] => Array
    (
        [0] => http://red.jpg
        [1] => version 1
        [2] => version 2
        [3] => version 3
        [4] => version 4
    )

[1] => Array
    (
        [0] => http://silver.jpg
        [1] => version 1
        [2] => version 2
        [3] => version 3
        [4] => version 4
    )

 )

I read through loads of pages but they don't fully make sense to me.. sure I'm just being thick!!

datatables render column

Answer 1

Excuse me decided that rather than waiting for the a JS solution if I was to wrap the string in html before passing onto the JS then this should fix my issue and yes it does. So now I can format the img etc and move.

Apologies for lack of grey matter last night.