Add action buttons/hyperlinks on each row on first column

asdren

This is how my table looks like right now:

Id | FirstName | LastName | Action | Links
--------------------------------------------
18| John | Doe | E - D | Link 1 Link 2
19| Jane | Doe | E - D | Link 1 Link 2

E = icon for edit
D = icon for delete

I want to move my action and link buttons to the front, placing them before the Id column.
Looking like this:

Action | Links | Id | FirstName | LastName
-------------------------------------------
| E - D | Link 1 Link 2 | 18 | John | Doe
| E - D | Link 1 Link 2 | 18 | Jane | Doe

E = icon for edit
D = icon for delete


Im using aoColumnDefs on my current setup and it looks something like this:
[code]
"aoColumnDefs": [
{
fnRender": function ( oObj ) {
return '';
},
"aTargets": [ 3 ]
},
,
{
"fnRender": function ( oObj ) {
return '';
},
"aTargets": [ 4 ]
}
] [/code]

I have tried to change the aTargets to [ 0 ] and [ -1 ] but it just overwrites the value of current columns, when I use [ 0 ] for Action column and [ 1 ] for my Links column for example then the value of column Id and FirstName is overwritten by my buttons.

Ending up like this:
Action | Links | LastName
-------------------------------------------
| E - D | Link 1 Link 2 | Doe
| E - D | Link 1 Link 2 | Doe

E = icon for edit
D = icon for delete

How can I add two columns with buttons to my table and move the other columns to the right of these two columns, rather than overwriting columns.

This is what I want to achieve:

Action | Links | Id | FirstName | LastName
-------------------------------------------
| E - D | Link 1 Link 2 | 18 | John | Doe
| E - D | Link 1 Link 2 | 18 | Jane | Doe

E = icon for edit
D = icon for delete

allan

> it just overwrites the value of current columns

When you say that, do you mean you have aoColumns also defined? Can you show us that as well please? Using mRender ( fnRender is deprecated and shouldn't be used) it should be quite possible to do what you are looking for.

Are you using Editor for these actions, or are they custom actions?

Allan

asdren

No I have not used aoColumns only aoColumnDefs and I'm not using Editor for these actions, these are custom actions.
This is how my code looks like:
[code]
var asInitVals = new Array();
$(document).ready(function() {
var oTable = $('#sales').dataTable( {
"bProcessing": true,
"bServerSide": true,
"bDeferRender": true,
"bSortClasses": false,
"sScrollX": "100%",
"sScrollXInner": "150%",
"fnInitComplete": function () {
new FixedColumns( oTable, {
"iLeftColumns": 5,
"iLeftWidth": 350
} );
},
"bScrollCollapse": true,
"aaSorting":[[0, "desc"]],
"sDom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"oScroller": {
"loadingIndicator": false
},
"sAjaxSource": "datatablesconnect.php",
"fnServerData" : function ( sSource, aoData, fnCallback ) {
aoData.push( { "name": "bekraftat", "value": "<?php echo isset( $_GET['bekraftat'] ) ? $_GET['bekraftat'] == "nej" : ''; ?>" } ),
aoData.push( { "name": "bekraftade", "value": "<?php echo isset( $_GET['bekraftade'] ) ? $_GET['bekraftade'] == "ja" : ''; ?>" } ),
aoData.push( { "name": "annullerade", "value": "<?php echo isset( $_GET['annullerade'] ) ? "ja" : ''; ?>" } ),
aoData.push( { "name": "raderade", "value": "<?php echo isset( $_GET['raderade'] ) ? $_GET['raderade'] == "ja" : ''; ?>" } );
$.ajax( {
"dataType": 'json',
"type": "GET",
"url": sSource,
"data": aoData,
"success": fnCallback
} );},
"oLanguage": {
"sUrl": "datatables/media/language/sv.txt"
},
"aoColumnDefs": [
{
"fnRender": function ( oObj ) {
return '';
},
"aTargets": [ 7 ]
},
{
"fnRender": function ( oObj ) {
return '';
},
"aTargets": [ 8 ]
}
]
} );
$("thead input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("thead input").index(this) );
} );



/*
* Support functions to provide a little bit of 'user friendlyness' to the textboxes in
* the footer
*/
$("thead input").each( function (i) {
asInitVals[i] = this.value;
} );

$("thead input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );

$("thead input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("thead input").index(this)];
}
} );
} );
[/code]

allan

Okay I think I'm understanding a little more. So the above code works does it? But when you set the targets to be 0 and 1 it overwrites the values - based on this:

> when I use [ 0 ] for Action column and [ 1 ] for my Links column for example then the value of column Id and FirstName is overwritten by my buttons.

That is correct - that is how fnRender works and one of the many reasons it hit the bin in v1.10! Its rubbish basically :-).

Use mRender instead!

Allan

asdren

Thanks Allan, but could you please show me how my code would look like with mRender instead of fnRender. Making my two custom columns display in front instead of the way its now.

Thanks in advance

allan

Its very similar:

[code]
mRender: function ( data, type, row ) {
return return '';
}
[/code]

Allan