【问题标题】:How to get image src value from server side jquery datatable in datatable?如何从数据表中的服务器端 jquery 数据表中获取图像 src 值?
【发布时间】:2015-07-11 05:44:37
【问题描述】:

我正在使用 jquery 数据表并使用 ajax 调用填充该数据表,并且工作正常,但现在我需要在列中显示图像,但我不知道如何绑定这些图像。图像链接来自 category_image 中的后端.

后端:

var displayedCategories = filteredCategories;
var result = from c in displayedCategories select new[] 
{c.id, c.category_name, c.category_image,c.id};
return Json(new{
sEcho = param.sEcho,
iTotalRecords = lstAllCategories.Count,
iTotalDisplayRecords = 10,
aaData = result},JsonRequestBehavior.AllowGet);

前端:

$('#tblInterests').dataTable({
"bServerSide": true,
"sAjaxDataProp": "aaData",
"bProcessing": true,
"bLengthChange": false,
"sPaginationType": "full_numbers",
"bSort": true,
"aoColumns":[
{"sName": "id"},
{"sName": "category_name" },
{"sName": "category_image",
"bSearchable": false,
"bSortable": false,
"mRender": function (data) {
return '<img src="" width="50" height="50" />'
}
},
{"mData": "Id",
"bSearchable": false,
"bSortable": false,
"sWidth": "40px",
"mRender": function (data) {
return '<button class="btn btn-primary" type="button" >Edit</button>'
}
},
],
"ajax": "/Admin/InterestsJson",
"columns": [
{ "data": "id" },
{ "data": "category_name" },
{ "data": "category_image" },
{ "data": "id" }
]
});

【问题讨论】:

  • 你忘了实际使用图片 -> return '&lt;img src="'+data+'" width="50" height="50" /&gt;'
  • 非常感谢 davidkonrad ..... 给出答案,这样我就可以接受并投票给你

标签: c# jquery datatables


【解决方案1】:

mRender 中,data (==category_image) 应设置为图像的src

...
{ "sName": "category_image",
  "bSearchable": false,
  "bSortable": false,
  "mRender": function(data, type, full) {
     return '<img src="'+data+'" width="50" height="50" />'
  }
}
...

【讨论】:

  • 这里面的类型和全是什么
  • @Manjitsingh 感谢您接受答案!我只是给出了完整的参数列表,如果有人好奇的话。它对你没有任何影响。 type 是渲染类型 - 它可以是 filterdisplaytypesort。它提供了在对列进行排序时返回一个结果、在过滤时返回另一个结果、在显示时返回第三个结果等等的可能性。 full是当前行/记录的所有数据,如果要将记录中的多个值合并到一列中,可以使用。
猜你喜欢
  • 2019-07-21
  • 1970-01-01
  • 2014-04-01
  • 2023-03-10
  • 1970-01-01
  • 1970-01-01
  • 2015-06-29
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多