当 JSON 为 DataSource 时在 jquery 数据表列中显示图像答案

【问题标题】：Showing image in jquery data table column when JSON is the DataSource当 JSON 为 DataSource 时在 jquery 数据表列中显示图像
【发布时间】：2012-10-05 02:20:58
【问题描述】：

我正在使用 JQuery 数据表插件来显示班级中的学生列表。插件的数据源设置为服务器端操作，它将返回一个包含这些属性（名字、姓氏、年龄、性别……）的 json 对象。我们的要求最近已更改为根据学生性别显示图像（男性/女性）。

我可以加载所有数据，按照我想要的方式格式化表格，然后将其转换为 DataTable，但这是不可能的，因为我们有很多记录并且我们正在使用分页。

数据表插件中是否有任何功能可以进行后期渲染？

【问题讨论】：

是要添加另一列还是要修改现有的列
如何将<img src="Images/PictureName.png"> 放在相关列的 json 中？
@Daniel - 我认为他不想修改服务器代码。
这可能会更好，stackoverflow.com/a/8214234/617373

标签： jquery-plugins datatables

【解决方案1】：

使用mRender option

数据表文档中的代码

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

链接到工作示例here

编辑：实现此目的的另一种方法是使用 Daniel 指出的“fnRowCallback”。使用这个link :)

干杯！！

【讨论】：

【解决方案2】：

我尝试了“mRender”并得到了我需要的东西

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

【讨论】：