当JSON为DataSource时，在jquery数据表列中显示图像
当JSON为DataSource时，在jquery数据表列中显示图像
提问于 2012-10-15 05:57:39
我正在使用JQuery数据表插件来显示班级中的学生列表。插件的数据源被设置为服务器端操作，它将返回一个json对象，其中包含这些属性(FirstName、LastName、年龄、性别...)。我们的要求最近更改为显示基于学生性别的图像(男性/female)。
我可以加载所有数据，以我想要的方式格式化表格，然后将其转换为DataTable，但这是不可能的，因为我们有很多记录，并且我们使用分页。
数据表插件中有没有可以进行后期渲染的函数？
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-10-15 06:51:17
来自datatables文档的代码
$(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 :)
干杯！！
Stack Overflow用户
发布于 2013-08-18 16:56:15
我尝试了"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] }
]
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12890049
复制相关文章
相似问题
腾讯云开发者
