fnRender question
fnRender question
I have have a function that builds the columns to be passed in the datatable init function like "aoColumns":self.buildTableColumns(self.GridArray)
The function receives an array of parameters that I would like to be linked to each column to be rendered (description, additional data etc).
the "fnRender" function of each column that is pushed in the columns array is correctly called.
What I do not arrive to get is an arbitrary property attached to the columns.
So:
[code]
buildTableColumns: function(arracoluns) {
var columndata, i, newcolumn, newfieldname, self, tcolumns, _i, _len, _ref, _ref2;
self = this;
tcolumns = [];
i = 0;
_ref = this.GridArray;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
columndata = _ref[_i];
i++;
newcolumn = new Object();
if (columndata.type === "img") {
newcolumn = {
"bSortable": false,
"fnRender": function(obj) {
return '';
},
"sWidth": "" + columndata.width + "px"
};
} else {
newfieldname = (_ref2 = columndata.fieldName) != null ? _ref2 : columndata.description;
newcolumn = {
"mydata": newfieldname,
"fnRender": function(obj) {
console.log("mydata:", this.mydata);
console.log("newcolumn:", newcolumn.mydata);
return self.tableutils.RenderCellAll(obj, this.mydata);
}
};
}
tcolumns.push(newcolumn);
}
return tcolumns;
[/code]
In Firebug the console.log of mydata is always undefined and the console.log of newcolumn is always the last item in the array.
The function receives an array of parameters that I would like to be linked to each column to be rendered (description, additional data etc).
the "fnRender" function of each column that is pushed in the columns array is correctly called.
What I do not arrive to get is an arbitrary property attached to the columns.
So:
[code]
buildTableColumns: function(arracoluns) {
var columndata, i, newcolumn, newfieldname, self, tcolumns, _i, _len, _ref, _ref2;
self = this;
tcolumns = [];
i = 0;
_ref = this.GridArray;
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
columndata = _ref[_i];
i++;
newcolumn = new Object();
if (columndata.type === "img") {
newcolumn = {
"bSortable": false,
"fnRender": function(obj) {
return '';
},
"sWidth": "" + columndata.width + "px"
};
} else {
newfieldname = (_ref2 = columndata.fieldName) != null ? _ref2 : columndata.description;
newcolumn = {
"mydata": newfieldname,
"fnRender": function(obj) {
console.log("mydata:", this.mydata);
console.log("newcolumn:", newcolumn.mydata);
return self.tableutils.RenderCellAll(obj, this.mydata);
}
};
}
tcolumns.push(newcolumn);
}
return tcolumns;
[/code]
In Firebug the console.log of mydata is always undefined and the console.log of newcolumn is always the last item in the array.
This discussion has been closed.
Replies
fnRender is executed with the scope of the DataTables instance, which is why this.mydata is undefined - there is no "mydata" property in DataTables. Equally the reason that newcolumn.mydata is always the last item is that there is no closure - it is being evaluated after the loop has finished.
What you want to do, rather than using external parameters is use what fnRender gives you :-). The first parameter (obj in the above code) will give you the original data source for the row in the parameter obj.aData . You can also get the current column index from iDataColumn (see the fnRender documentation for more information: http://datatables.net/ref#fnRender ).
So for example, if you were to alter:
[code]
console.log("mydata:", this.mydata);
[/code]
to be:
[code]
console.log(Row data:", obj.aData);
[/code]
you will be able to see the row data for that row that is being rendered, and then work with that to do your rendering.
Regards,
Allan