CODEWITHSUNDEEP
jquery-pluginsdatatables
Sujith Kp
Sujith Kp

Reputation: 1105

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

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 ?

Upvotes: 4

Views: 20813

Answers (2)

Vignesh
Vignesh

Reputation: 1518

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] }
            ]
        });

Upvotes: 4

bhb
bhb

Reputation: 2561

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!!

Upvotes: 4

Related Questions