fnRender renders all matching "mDataProp" columns
fnRender renders all matching "mDataProp" columns
alexmcallister82
Posts: 2Questions: 0Answers: 0
Hi,
I'm using Datatables 1.9.2 and am trying to implement an "actions"
column similar to this example:
http://www.datatables.net/forums/discussion/5862/creating-an-action-column-for-icons-view-edit-delete/p1
Here is my table initialisation:
[code]
$('.data-table').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": '<""l>t<"F"fpr>',
"bProcessing": true,
"sAjaxSource": "./data-subset.json",
"aoColumns": [
{"mDataProp": "id"},
{"mDataProp": "date"},
{"mDataProp": "user"},
{"mDataProp": "status"},
{
"bSearchable": false,
"bSortable": false,
"mDataProp": "id",
"fnRender": function(data) {
return "hello" + data.aData["id"];
}
}
]
});
[/code]
The markup:
[code]
Date
Uploaded
Download
Status
Actions
[/code]
And some JSON:
[code]
{
"sEcho": 2,
"iTotalRecords": "2",
"iTotalDisplayRecords": "2",
"aaData": [
{
"id": "1",
"date": "09/30/2012",
"user": "user1",
"status": "Active"
},
{
"id": "2",
"date": "06/03/2012",
"user": "user2",
"status": "Inactive"
}
]
}
[/code]
What's happening is that both the first "id" column and the "Actions"
column are being rendered. I would need to just show the id in the
first column, and the rendered one in the "Actions" column.
What am I doing wrong?
Cheers,
Alex
I'm using Datatables 1.9.2 and am trying to implement an "actions"
column similar to this example:
http://www.datatables.net/forums/discussion/5862/creating-an-action-column-for-icons-view-edit-delete/p1
Here is my table initialisation:
[code]
$('.data-table').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": '<""l>t<"F"fpr>',
"bProcessing": true,
"sAjaxSource": "./data-subset.json",
"aoColumns": [
{"mDataProp": "id"},
{"mDataProp": "date"},
{"mDataProp": "user"},
{"mDataProp": "status"},
{
"bSearchable": false,
"bSortable": false,
"mDataProp": "id",
"fnRender": function(data) {
return "hello" + data.aData["id"];
}
}
]
});
[/code]
The markup:
[code]
Date
Uploaded
Download
Status
Actions
[/code]
And some JSON:
[code]
{
"sEcho": 2,
"iTotalRecords": "2",
"iTotalDisplayRecords": "2",
"aaData": [
{
"id": "1",
"date": "09/30/2012",
"user": "user1",
"status": "Active"
},
{
"id": "2",
"date": "06/03/2012",
"user": "user2",
"status": "Inactive"
}
]
}
[/code]
What's happening is that both the first "id" column and the "Actions"
column are being rendered. I would need to just show the id in the
first column, and the rendered one in the "Actions" column.
What am I doing wrong?
Cheers,
Alex
This discussion has been closed.
Replies
[code]
$('.data-table').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": '<""l>t<"F"fpr>',
"bProcessing": true,
"sAjaxSource": "./data-subset.json",
"aoColumns": [
{"mDataProp": "id"},
{"mDataProp": "date"},
{"mDataProp": "user"},
{"mDataProp": "status"},
{
"bSearchable": false,
"bSortable": false,
"mDataProp": null,
"fnRender": function(data) {
return "hello" + data.aData["id"];
}
}
]
});
[/code]
mDataProp should be null for empty columns. Should have spent more time reading the forums!
http://datatables.net/forums/discussion/12930/custom-columns-addeditdelete...
Alex
fnRender re-writes the data source for the row, which is why it appears to effect a different column from the rendering done by another column. Add an fnRender for your first column and you've got a recipe for madness!
fnRender was perhaps what I thought was a cunning idea at the time, but it is actually far more trouble than it is worth. mRender is the way forward :-)
Allan