Question

我正在使用JQuery Data Table插件来显示班级中的学生列表。插件的数据源设置为服务器端操作，它将返回包含这些属性（FirstName，LastName，Age，Sex，....）的json对象。我们的要求最近改为显示基于学生性别的图像（男/女）。

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

数据表插件中是否有可用于后期渲染的函数？

Answer 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

编辑：实现这一目标的另一种方法是使用丹尼尔指出的“fnRowCallback”。使用此link：）

干杯!!

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

当JSON是DataSource时，在jquery数据表列中显示图像

2 个答案: