CODEWITHSUNDEEP
jqueryhtmldatatables
Thinker
Thinker

Reputation: 99

jquery datatables img in aoCoulumn

I'm getting the data from a database but one of them is an image file path like this '~\images\food.png' but i want to but it in an img tag so it can show the image not the path. Some one help please, Thanks in advance.

        $(document).ready(function () {
     load();
 });
 function load() {
     $.ajax({
         type: "POST",
         url: "ParentCategoryManagment.aspx/PopulateCategories",
         contentType: "application/json; charset=utf-8",
         data: "{}",
         dataType: "json",
         success: AjaxSucceeded,
         error: AjaxFailed
     });
 }
 function AjaxSucceeded(respone) {

     var json = jQuery.parseJSON(respone.d);

     if (typeof oTable == 'undefined') {
         oTable = $('#tblData').dataTable({
             'aaData': json,
             'aoColumns':
                [
                    { "mDataProp": "Id" },
                    { "mDataProp": "Name" },
                    { "mDataProp": "ImagePath" },
                    { "mDataProp": null, "sDefaultContent": '<a class="edit" href="">Edit</a>' },
                    { "mDataProp": null, "sDefaultContent": '<a class="delete" href="">Delete</a>' }
                ]
         });
     }
     else {

         oTable.fnClearTable(0);
         oTable.fnAddData(json);
         oTable.fnDraw();

     }
 }
 function AjaxFailed(result) {
     alert('Ajax Failed');
 }

Upvotes: 2

Views: 1214

Answers (1)

sajawikio
sajawikio

Reputation: 1514

See JSFIDDLE DEMO: http://jsfiddle.net/HPdVH/5/

You need to go through each of your image paths and turn them to images. In your case it always seems to be the third table column so you could do this after your table is loaded via ajax:

 $("tr").each(function(){
         $(this).children("td")
                .eq(2)
                .html("<img src='" + $(this).html() + "'/>");
 })

Upvotes: 2

Related Questions