Display image in jquery data table column when JSON is data source

Question

I use the jQuery Data Table plugin to show a list of students in a class. The plug-in data source is defined as a server-side action that returns a json object that contains these properties (FirstName, LastName, Age, Sex, ....). Our requirement has recently changed to show an image (male / female) based on student gender.

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

Are there any functions in the data table plugin that will perform post-rendering?

Answer 1

Use the mRender parameter

Code from 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 Daniel pointed out. Use the link :)

Hooray!!

Answer 2

I tried "mRender" and got what was 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] } ] });