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

Question

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

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

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

Answer 1

使用mRender 选项

数据表文档中的代码

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

链接到这里的工作示例

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

干杯！！

Answer 2

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

查询：

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