aoColumns to render columns

arunudayan

Hi All,

I am using aoColumns to render one of the columns. This column shows me an edit link and a delete button correctly but the click on these do not work properly. Is the usage correct or I need to do something else to have this work correctly?

[code]$(document).ready(function() {
$('#mainDataTable').dataTable( {
bProcessing:true,
bServerSide:true,
bFilter:false,
bSort:false,
sAjaxSource:'${request.contextPath + '/eventAlarm/dataTablesData'}',
"aoColumns":[
null,
null,
null,
null,
{
"fnRender": function ( oObj ) {
var id = oObj.aData[4];
return 'Edit Delete';
}
}
],
sPaginationType:"full_numbers",
} );

} );[/code]

girishmr

Arun,

fnRender is depricated as of 1.9.4 and will be completely removed from 1.10.
Having said that you can use mRender as given below;

Note: When using fnRender, try assigning a class to the 'delete' column and bind it to the click event

[code]

var oTable = $('#mainDataTable').dataTable( {
// Other settings
});

"aoColumnDefs": [
{
"aTargets":[12], // YOUR ACTUAL COLUMN NUMBER
"fnCreatedCell": function(nTd, sData, oData, iRow, iCol)
{
$(nTd).css('text-align', 'center');
},
"mData": null,
"mRender": function( data, type, full) {
return '';
}
}
] // End aoColumnDefs
[/code]

Then you can use either of the following code
[code]
$('#mainDataTable a.delete').live('click', function(){
var nTr = this.parentNode;
var aData = oTable.fnGetData( nTr );

/* Get the row as a parent of the link that was clicked on */
var nRow = $(this).parents('tr')[0];

// aData[0] will have row id - if that is how you have structured the table

// YOUR OTHER CODE

});
[/code]

OR - Making particular column clickable

[code]
$("#mainDataTable td:nth-child(N)").live("click", function () { // "N" should be replaced by your col number

var nTr = this.parentNode;
var aData = oTable.fnGetData( nTr );

/* Get the row as a parent of the link that was clicked on */
var nRow = $(this).parents('tr')[0];

// aData[0] will have row id - if that is how you have structured the table

// YOUR OTHER CODE
});
[/code]


Hope this helps

arunudayan

Thanks Girish,

I have actually started using grails and the latest available datatables plugin for grails is 1.7.5 which does not have mRender.

arunudayan

Also, in my example a single column contains two fields 'edit' and 'delete' where edit is a clickable link (uses tag) and delete calls a javascript function.