change column value to an image using aoColumnDefs and mRender
change column value to an image using aoColumnDefs and mRender
comfuner
Posts: 9Questions: 0Answers: 0
Hi I am building a movie critic table the grade each critic gives needs to be changed into stars, but still retain the original value for sorting properties, I am getting the data from Google Spreadsheet which is crucial:
these are the basic defs:
[code]
...
var oTable = $('#critic').dataTable({
"bServerSide": false,
"bProcessing": true,
"sAjaxDataProp": "feed.entry",
"sAjaxSource": "https://spreadsheets.google.com/feeds/list/0AovTwC7nfGXAdG1yQ29KYkhpRjZ3ejFQVk5VZEZOS2c/od6/public/values?alt=json",
"aoColumns": [
{
"mDataProp": null,
"sClass": "control center",
"sDefaultContent": ''
},
{ "mDataProp": "gsx$name.$t" },
{ "mDataProp": "gsx$haaretz.$t" },
{ "mDataProp": "gsx$galatz.$t" },
{ "mDataProp": "gsx$yediot.$t" },
{ "mDataProp": "gsx$walla.$t" },
{ "mDataProp": "gsx$pnai.$t" },
{ "mDataProp": "gsx$sof.$t" },
{ "mDataProp": "gsx$israel.$t" },
{ "mDataProp": "gsx$average.$t"}
],
"aoColumnDefs": [
],
...
[/code]
I understand that I need to use the column defs and render new data into the cells but I just cant get it done!!
what I want is each of the columns to get images instead of numbers except the name column.
Made some failed attempts and would appreciate your kind assistance
these are the basic defs:
[code]
...
var oTable = $('#critic').dataTable({
"bServerSide": false,
"bProcessing": true,
"sAjaxDataProp": "feed.entry",
"sAjaxSource": "https://spreadsheets.google.com/feeds/list/0AovTwC7nfGXAdG1yQ29KYkhpRjZ3ejFQVk5VZEZOS2c/od6/public/values?alt=json",
"aoColumns": [
{
"mDataProp": null,
"sClass": "control center",
"sDefaultContent": ''
},
{ "mDataProp": "gsx$name.$t" },
{ "mDataProp": "gsx$haaretz.$t" },
{ "mDataProp": "gsx$galatz.$t" },
{ "mDataProp": "gsx$yediot.$t" },
{ "mDataProp": "gsx$walla.$t" },
{ "mDataProp": "gsx$pnai.$t" },
{ "mDataProp": "gsx$sof.$t" },
{ "mDataProp": "gsx$israel.$t" },
{ "mDataProp": "gsx$average.$t"}
],
"aoColumnDefs": [
],
...
[/code]
I understand that I need to use the column defs and render new data into the cells but I just cant get it done!!
what I want is each of the columns to get images instead of numbers except the name column.
Made some failed attempts and would appreciate your kind assistance
This discussion has been closed.
Replies
[code]
...
"aoColumnDefs": [
{
"mrender": function (data, type, row) {
img_str = '';
return img_str;
}, "aTargets":[ 9 ] /*this is for the last column but I want to use all column accept 0 and 1*/
}
],
...
[/code]
Just case sensitive mrender need to be mRender.
Allan