Adding images/buttons to a column to perform actions(i.e update,delete etc.) on a table row???

abhinavm_123

Hello,
Can anyone help me out with this one ...I have a table with a list of employees which i'm displaying on the JSP page.I'm using dataTable to display only a certain amount of values on the Page (say 5)... i would like to have a column for Actions(update,delete etc).In this column i want to use anchor tag and hv a background image to show the respective action. Is there a way to achieve this???
Plz help me out.... :)
Abhinav

fbas

Yes. Here is an example where such a column is created with a client-side or AJAX sourced set of data (Allan's drill-down rows blog example):
http://www.datatables.net/blog/Drill-down_rows

see the 1st column in aoColumns. Allan uses mDataProp: null because this column doesn't use any data, adds an image in sDefaultContent. Using JQuery, he attaches event listeners.
[code]
$(document).ready(function() {
var anOpen = [];
var sImageUrl = "/release-datatables/examples/examples_support/";

var oTable = $('#example').dataTable( {
"bProcessing": true,
"sAjaxSource": "/release-datatables/examples/ajax/sources/objects.txt",
"aoColumns": [
{
"mDataProp": null,
"sClass": "control center",
"sDefaultContent": ''
},
{ "mDataProp": "engine" },
{ "mDataProp": "browser" },
{ "mDataProp": "grade" }
]
} );
} );

$('#example td.control').live( 'click', function () {
var nTr = this.parentNode;
var i = $.inArray( nTr, anOpen );

if ( i === -1 ) {
$('img', this).attr( 'src', sImageUrl+"details_close.png" );
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
anOpen.push( nTr );
}
else {
$('img', this).attr( 'src', sImageUrl+"details_open.png" );
oTable.fnClose( nTr );
anOpen.splice( i, 1 );
}
} );

function fnFormatDetails( oTable, nTr )
{
var oData = oTable.fnGetData( nTr );
var sOut =
''+
''+
'Rendering engine:'+oData.engine+''+
'Browser:'+oData.browser+''+
'Platform:'+oData.platform+''+
'Version:'+oData.version+''+
'Grade:'+oData.grade+''+
''+
'';
return sOut;
}

[/code]

If you are using server-side processing / source data, you can see this discussion:
http://www.datatables.net/forums/discussion/5862/creating-an-action-column-for-icons-view-edit-delete/p1

It's a similar concept.