Showing image in jquery data table column when JSON is the DataSource

Question

I am using JQuery Data Table plugin to show a list of students in a class. The data source of the plug in is set as a server side action, which will return a json object which contains these properties (FirstName, LastName, Age, Sex,....). Our requirement has recently changed to show an image (male /female) based on the student sex.

I can either load all data, format the table way I want and then convert it to DataTable, but this is not possible because we have lot of records and we are using pagination.

Is there any functions available in data table plugin that will do post-rendering ?

Answer 1

Use mRender option

Code from the datatables docs

$(document).ready(function() {
  $('#example').dataTable( {
    "aoColumnDefs": [
        {
            // `data` refers to the data for the cell (defined by `mData`, which
            // defaults to the column being worked with, in this case is the first
            // Using `row[0]` is equivalent.
            "mRender": function ( data, type, row ) {
                return data +' '+ row[3];
            },
            "aTargets": [ 0 ]
        },
        { "bVisible": false,  "aTargets": [ 3 ] },
        { "sClass": "center", "aTargets": [ 4 ] }
     ]
    } );
} );

Link to working example here

EDIT: Another way to achieve this is to use "fnRowCallback" as pointed out by Daniel. Use this link :)

Cheers!!

Answer 2

I tried "mRender" and got what I required

Jquery:

 $('#tblUserSalaryDetails').dataTable({
            "bJQueryUI": true,
            "bAutoWidth": false,
            "bProcessing": true,
            "bDestroy":true,
            "bPaginate": true,
            "aLengthMenu": [[5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "All"]],
            "iDisplayLength": 10,
            "ServerSide": true,
            "bFilter": true,
            "bScrollAutoCss": true,
            "bSort": true,
            "bInfo": false,
            "sAjaxSource": '@Url.Action("getUserDetails","Home")',
            "aoColumns": [
                        { sWidth: '2%', "mData": "Sno", "bSortable": false, "sClass": "center", "sTitle": "S.No", "bSearchable": false },
                        { sWidth: '4%', "mData": "EmpID", "sClass": "center", "sTitle": "Emp Id" },
                        { sWidth: '7%', "mData": "EmpSalary", "sClass": "center", "sTitle": "Emp Salary" },
                        {
                            "bSortable": false, "mData": null, "sTitle": "Actions", "bSearchable": false, "mRender": function () {
                                return '<img alt="Edit" src="/Content/images/ApplicationSetup/Action-edit-icon.png" title="Edit" style="height:18px;width:19px;cursor:pointer;" /> <img alt="Delete" src="/Content/images/ApplicationSetup/Trash-can-icon.png" title="Delete" style="height:18px;width:19px;cursor:pointer"  />';
                            }
                        }
            ],
            "sAjaxDataProp": "EmpSalDetails",
            "sPaginationType": "full_numbers",
            "oLanguage": {
                "sZeroRecords": "No Records Found"
            },
            "aoColumnDefs": [
             { "sWidth": "9%", "aTargets": [-1] }
            ]
        });